返回顶部功能的实现

最新推荐文章于 2025-08-15 09:50:45 发布

转载最新推荐文章于 2025-08-15 09:50:45 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hzzhao/p/5264707.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的返回顶部功能实现方案，通过在页面底部添加HTML代码、加入JavaScript逻辑以及定义CSS样式来实现。当用户滚动页面超过100像素时，会显示一个返回顶部按钮，点击后页面将平滑滚动回顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现该功能一共只需三步:

第一步: 在页面底部加入HTML代码

把下面的HTML加入到页面底部, 最好是紧挨着</body>标签:

<a href="#" class="go-top"><div></div></a>

第二步: 加入JS

if (jQuery('.go-top').length > 0) {
            jQuery(window).scroll(function () {
                if (jQuery(this).scrollTop() > 100) {
if(parseInt(jQuery('.go-top').css("right"))==-60){
jQuery('.go-top').animate({right:20},500);}
                }
                else {
if(parseInt(jQuery('.go-top').css("right"))==20){
jQuery('.go-top').animate({right:-60},500);}
                }
            });
            jQuery('.go-top').click(function () {
                jQuery("html,body").animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        }

第三步: 添加CSS

.go-top{    
position: fixed;
right: -60px;
bottom:20px;
z-index: 100;
}
.go-top div{
background-image:url('/wp-content/uploads/2015/07/gototop.png');
width:48px;
height:48px;
}

最后的效果看我的博客就知道了~

转载于:https://www.cnblogs.com/hzzhao/p/5264707.html