回到顶部

Posted 2020-08-07 千里皓月

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了回到顶部相关的知识，希望对你有一定的参考价值。

回到顶部有多种实现方式：

1.通过锚点然后定位，这个比较简单，但是效果比较生硬，就不多解释了

2.通过javascript实现，用到了定时器，window.onload,window.onscroll,setInterval,clearInterval,document.documentElement.scrollTop||document.body.scrollTop(兼容谷歌火狐)

原理是通过监听滚动，获得实时的scrollTop，然后scrollTop-=200(常数)，这个也不多说了

3，通过jQuery实现，今天主要讲这个，首先准备一张大图，附上代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>回到顶部</title>
<style type="text/css">
    #btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:none; background:url(img/top_bg.png) no-repeat left top;}
    #btn:hover {background:url(img/top_bg.png) no-repeat 0 -39px;}
    .bg {width:1190px; margin:0 auto;}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
    $(function(){
        var scrollTop=0;
        $(window).scroll(function(){
            scrollTop=$(document).scrollTop();
            var H=$(window).height();
            if(scrollTop>H){
                $(‘#btn‘).css({
                    display:‘block‘
                });
            }else{
                $(‘#btn‘).css({
                    display:‘none‘
                });
            }
            
        });
        $(‘#btn‘).click(function(){
            $(‘body,html‘).animate({
                scrollTop:0
            },1000);
        });
    });
</script>
    
</head>
<body>
    <a href="javascript:;" id="btn" title="回到顶部"></a>
    <div class="bg">
        <img src="img/tb_bg.jpg" alt="" />
    </div>
</body>
</html>

以上是关于回到顶部的主要内容，如果未能解决你的问题，请参考以下文章