1. html 中添加一個返回頂部的按鈕，本例中采用了一個絕對定位的div，（position:fixed），背景色給了一定的透明度，并加入一個向上的箭頭icon。

2. 綁定window 的scroll事件，即發生scroll事件，則進行按鈕的顯示隱藏的操作判斷。

判斷方法是：滾動條垂直高度大于某個值，則顯示按鈕（show()）；否則則隱藏按鈕(hide())；

3. 綁定點擊返回頂部按鈕的事件，給予一個動畫，scroll到頂部（可以以body標簽的位置作為參考）

例碼如下：

html:

<div class="backToTop" title = "Back to top" style="display:none"><a href="#"><i class="angle up huge icon"></i></a></div>

css:

.backToTop { background:rgba(0,120,255,0.7); position:fixed; bottom:6%; right:7%; }

.backToTop a {display: block;line-height: 55px; height: 55px;}

js:?

function goToTop(options){

var opts = {

bottomDistance:60,//距頁面下邊距離

rightDistance:100,//距頁面右邊距離

startline:20,//出現回到頂部按鈕的滾動條scrollTop距離

duration:200,//回到頂部的速度時間

targetObg:"body"//目標位置

};

var $window=$(window);

var $this = options;

clearTimeout(goToTopTime);

var goToTopTime=setTimeout(function(){

var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;

if (shouldvisible){

$this.stop().show();

}else{

$this.stop().hide();

}

// $this.css({

// position: 'fixed',

// bottom: opts.bottomDistance,

// right: opts.rightDistance

// });

},30);

$this.click(function(event){

$('html,body').stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration);

$this.blur();

event.preventDefault();

event.stopPropagation();

});

};

var backToTop = function(){

var $backToTop = $(".backToTop");

goToTop($backToTop);

? ? $(window).bind('scroll resize',function(){

? ? goToTop($backToTop);

? ? });

};

轉載于:https://blog.51cto.com/sikana/1672913

總結

以上是生活随笔為你收集整理的jquery 实现返回顶部功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。