html返回顶部开始隐藏,回到顶部并且监听顶部按钮显示或隐藏
生活随笔
收集整理的這篇文章主要介紹了
html返回顶部开始隐藏,回到顶部并且监听顶部按钮显示或隐藏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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返回顶部开始隐藏,回到顶部并且监听顶部按钮显示或隐藏的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python utf编码 查询_pyth
- 下一篇: 百家号怎么加网站链接进行引流,方法让你轻