Đặt hiệu ứng khi nhấp vào biểu tượng tên lửa, jquery cuộn trở lại mã JS trên cùng

chia sẻ như thế nàoWordPressThực hiện hiệu ứng "nhấp vào tên lửa để quay lại đầu trang" trong chủ đề.

• Nếu bạn là một người thích sử dụng WordPress, bạn biết cách chuyển nó sang một chủ đề WordPress.
• Bài báo này cũng phù hợpxây dựng một trang webngười bắt đầu.

Rocket Ascent Quay lại đầu trang Hình ảnh

Tải trước ảnh trên, nên cho vào thư mục ảnh dưới thư mục theme.

Bước 1: Tải các tệp thư viện jQuery

• Tải tệp thư viện jQuery, nếu chủ đề WordPress đã được tải, bạn có thể bỏ qua bước này;

WordPress giới thiệu thư viện jQuery của bên thứ 3, vui lòng xem hướng dẫn này ▼

Làm cách nào để tải xuống thư viện jQuery? WordPress giới thiệu thư viện jQuery của bên thứ 3

WordPress đi kèm với thư viện jQuery, nhưng thư viện jQuery của riêng nó được sửa đổi một chút.Nếu bạn học cách sử dụng nó, bạn có thể không đạt được một số hiệu ứng jQuery.Thư viện jQuery thường có dung lượng lớn từ 50-90kb, nếu máy chủ lưu trữ của bạn không hoạt động tốt, thì trang web của bạn sẽ tải ...

Bước 2: Thêm mã vào tệp footer.php

Thêm mã sau vào vị trí tương ứng trong chủ đề footer.php ▼

<div class="one"></div>
<div id="backtotop" style="display:none;"></div>

Bước 3: Thêm mã vào tệp CSS

Thêm mã CSS sau vào tệp style.css của chủ đề ▼

.one {width:100%;height:3000px;}
#backtotop {background:url(images/rocket_up.png) 0px 0px no-repeat;position:fixed;bottom:0px;right:10px;width:149px;height:260px;cursor: pointer;z-index:1000;}

Bước 4: Thêm trở lại mã JS hàng đầu

Đối với mã js sau, bạn có thể tạo một tệp js khác;

hoặc hợp nhất nó vào tệp js có liên quan của một chủ đề hiện có (được khuyến nghị);

hoặc bạn có thể bọc nó trong footer.php Trung bình ▼

var scrollTT = {
tTSpeed : 800, // 滚动到顶部的时间
startFlyTime : 1000, // 火箭起飞的时间
restartTime : 1200, // 重置火箭位置的时间
flySpeed : 50, // 火箭向上飞行的速度
obj : $("#backtotop"), // 回到顶部的dom
flyTemp : '', // 一个setInterval的临时变量
/**
* 
* 初始化 scrollTT 函数
* 主要是像对象添加事件
*
*/
init : function( obj, tTSpeed, startFlyTime, restartTime, flySpeed ) {
scrollTT.tTSpeed = scrollTT.tTSpeed || tTSpeed;
scrollTT.startFlyTIme = scrollTT.startFlyTIme || startFlyTime;
scrollTT.restartTime = scrollTT.restartTime || restartTime;
scrollTT.flySpeed = scrollTT.flySpeed || flySpeed;
scrollTT.obj = scrollTT.obj || obj;

// 向window 绑定scroll 事件
scrollTT.onScroll();


scrollTT.obj.click(function(){
// 关闭默认的scroll事件
$(window).off("scroll");
// 页面向上滚动
$('html,body').animate({scrollTop: '0px'}, this.tTSpeed);
// 火箭向上飞行
scrollTT.objFly();
// 火箭的喷气效果
scrollTT.blow();

});

// 鼠标在火箭上的效果
scrollTT.obj.mouseenter(function() {
$(this).css('background-position', '-149px 0px');
});
// 鼠标移开的效果
scrollTT.obj.mouseleave(function() {
$(this).css('background-position', '0px 0px');
});

}, 
/*
* 向window 绑定scroll 事件
*
*/
onScroll : function() {
$(window).on('scroll', function() {
if ($(window).scrollTop()>500){
scrollTT.obj.fadeIn(500);
}else{
scrollTT.obj.fadeOut(1500);
}
});
},
/**
* dom对象向上飞行
*
*/
objFly : function() {
var fly = setTimeout(function(){
scrollTT.obj.animate({top: '-500px'} ,'normal', 'swing');
scrollTT.resetFly();
clearTimeout(fly);
clearInterval(scrollTT.flyTemp);
}, scrollTT.startFlyTime);
},
/**
* dom 对象飞行完毕回到原来的位置
*
*/
resetFly : function() {
var fly2 = setTimeout(function() {
scrollTT.obj.hide();
scrollTT.obj.css("top", 'auto');
scrollTT.obj.css("background-position", '0px 0px');
scrollTT.onScroll();
clearTimeout(fly2);
},scrollTT.restartTime);
},
/**
* dom 对象的喷气效果
*
*/
blow : function() {
var topPosiiton = -149;
scrollTT.flyTemp = setInterval(function() {
topPosiiton += -149;
if(topPosiiton < -743) {
topPosiiton = -149
}
scrollTT.obj.css('background-position', topPosiiton + 'px 0px');
}, this.flySpeed);
}
};

scrollTT.init();