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

最新推荐文章于 2024-03-19 10:15:00 发布

原创

最新推荐文章于 2024-03-19 10:15:00 发布 · 5.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#scroll #function #html #jquery #数据库 #go

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

引用的样式如下（实现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
        },
   &

最低0.47元/天解锁文章