html：

js:

/**

* 點擊top按鈕回到頂部

*/

$('#top,#top2').on('click',function () {

$("html, body").animate({scrollTop: 0 }, {duration: 500,easing: "swing"});

return false;

});

/**

* 監聽頁面

* */

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

if(window.innerWidth >= 768){

var len=$(this).scrollTop();

if(len>=100){

//顯示回到頂部按鈕

$('#top').fadeIn('1000');

}else{

//影藏回到頂部按鈕

$('#top').fadeOut('1000');

}

}else {

var len=$(this).scrollTop();

if(len>=100){

//顯示回到頂部按鈕

$('#top2').fadeIn('1000');

}else{

//影藏回到頂部按鈕

$('#top2').fadeOut('1000');

}

}

});

總結

以上是生活随笔為你收集整理的html返回顶部开始隐藏,回到顶部并且监听顶部按钮显示或隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

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