【Web Trick 9】实现页面中的“回到顶部”按钮

实现返回顶部按钮

最新推荐文章于 2024-04-20 18:29:52 发布

原创最新推荐文章于 2024-04-20 18:29:52 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

Web Tricks 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的返回顶部按钮实现方案，使用HTML、CSS和JavaScript，当页面滚动超过一定距离时显示按钮并允许用户点击返回页面顶部。

很多在页面的list很长的时候，我们都需要给用户提供一个回到顶部的向上滚动按钮，这里给出一个测试代码

<!DOCTYPE html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>test</title>  
<style type="text/css">  
    .back-to {
        position: fixed;
        bottom: 35px;
        _bottom: 35px;
        right: 10px;
        z-index: 999;
        width: 50px;
        zoom: 1;
        display: none;
    }
    .back-to .backtotop {
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        background: #666 url('btt.png') 8px 14px no-repeat;
        margin-bottom: 15px;
        outline: 0 none;
        text-indent: -9999em;
        -moz-border-radius: 4px;
        -khtml-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: relative;
    }
    .back-to .backtotop .back-tip {
        position: relative;
        display: none;
        top: -31px;
        left: -10px;
    }   
</style>  
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js">             
</script>
</head>  
  
<body>
    <div id="test"></div>  
    <div id="toolBackTo" class="back-to">
        <a stats="site_footer_back_to_top" class="backtotop" href="javascript:void(0)">返回顶部
            <img stats="site_footer_back_to_top" src="back-tip.png" class="back-tip">
        </a>
    </div>
</body>  
</html>

上面是html文件，下面是js文件

$(function()
{
    var util = {
        offset:function (){   
            var scrollPos;   
            if (typeof window.pageYOffset != 'undefined') {   
                scrollPos = window.pageYOffset;   
            }   
            else if (typeof document.compatMode != 'undefined' &&   
                document.compatMode != 'BackCompat') {   
                scrollPos = document.documentElement.scrollTop;   
            }   
            else if (typeof document.body != 'undefined') {   
                scrollPos = document.body.scrollTop;   
            }   
            return scrollPos;   
        },
        up:function()
        {
            $( 'html, body' ).animate( { scrollTop: 0 }, 500 );
        }
    };
    $(window).scroll(function()
    {
        var offset = util.offset();
       if(offset > 125)
            $(".back-to").show();
        else
            $(".back-to").hide();
    });
    $(".back-to").click(function()
    {
        util.up();
    })
    $(".back-to").hover(function()
    {
        $(".backtotop").css("background","#666 url('btt.png') 8px -57px no-repeat");
        $(".back-tip").css("display","block");
    },
    function()
    {
        $(".backtotop").css("background","#666 url('btt.png') 8px 14px no-repeat");
        $(".back-tip").css("display","none");
    });

    var color = ["#ff0000" , "#00ff00" , "#0000ff"];
    for (var i = 0; i < 100; i++) {
        var p=$("<p>test</p>");
        var index = i%3;
        p.css("background-color",color[index]);
        $("#test").append(p);
    };
})

给出两张要用到的图片