HTML代码 <p id="back-to-top"><a href="#top">返回顶部</a></p> CSS代码 p#back-to-top{ position:fixed; display:none; bottom:100px; right:80px; } js代码 $(function(){ //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>100){ $("#back-to-top").fadeIn(1500); } else { $("#back-to-top").fadeOut(1500); } }); //当点击跳转链接后,回到页面顶部位置 $("#back-to-top").click(function(){ if ($(‘html‘).scrollTop()) { $(‘html‘).animate({ scrollTop: 0 }, 100);//动画效果 return false; } $(‘body‘).animate({ scrollTop: 0 }, 100); return false; }); }); });
记得要引用jQuery文件
时间: 2024-10-13 03:56:46