js实现超过页面一屏后，点击图标滚动到页面顶部top

最新推荐文章于 2024-10-31 16:02:32 发布

nb_pdd

最新推荐文章于 2024-10-31 16:02:32 发布

阅读量5.6k

点赞数

分类专栏： jquery 文章标签： scroll function html jquery 数据库 go

本文链接：https://blog.youkuaiyun.com/nb_pdd/article/details/6047741

版权

这篇博客介绍了如何使用JavaScript和jQuery实现一个功能：当页面滚动超过一屏时，显示一个回到顶部的图标，点击该图标页面平滑滚动到顶部。通过设置CSS将图标定位在屏幕右下角，并在页面滚动时控制图标的显示和隐藏。当图标被点击时，使用`$('html, body').animate()`方法实现平滑滚动效果。" 105800302,7824362,Python数据分析：pandas入门指南,"['Python', '数据分析', 'pandas', 'DataFrame', 'Series']

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

引用的样式如下（实现top图标永远处在右下角位置）：
<style type="text/css">
#toTop {
    bottom: 0;
    cursor: pointer;
    padding: 0 0 1em;
    position: fixed;
    right: 0;
    width: 38px;
}

</style>

js如下：
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>      //引用jquery数据库
<img id="toTop" src="images/scroll_to_top.gif" width="38" height="68" alt="Scroll to Top" title="Scroll to Top" />
<script type="text/javascript">
$(document).ready(function() {
    var ScrolltoTop = $("#toTop");
    $(ScrolltoTop).hide();
    $(window).scroll(function() {
        if ($(window).scrollTop() == "0") {
            $(ScrolltoTop).fadeOut("slow")
        } else {
            $(ScrolltoTop).fadeIn("slow")
        }
    });
    $(ScrolltoTop).click(function() {
        $('html, body').animate({
            scrollTop: 0
        },
        700)
    })
});
</script>