js回到顶部

时间：2015-10-07 20:18:56 阅读：169 评论：0 收藏：0 [点我收藏+]

标签：

技术分享图片

回到顶部1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 4000px;
        }
        #btn{
            width: 40px;
            height: 40px;
            position: absolute;
            cursor: pointer;
            background: url(top_bg.png);    
        }
        #btn:hover{
            background-position: 0 -40px;
        }
    </style>
    <script type="text/javascript" src="move.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            var oBtn=document.getElementById(‘btn‘);
            var screenw=document.documentElement.clientWidth||document.body.clientWidth;
            var screenh=document.documentElement.clientHeight||document.body.clientHeight;
            oBtn.style.left=screenw-oBtn.offsetWidth+‘px‘;
            oBtn.style.top=screenh-oBtn.offsetHeight+‘px‘;
            window.onscroll=function(){
                var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
                oBtn.style.top=scrolltop+screenh-oBtn.offsetHeight+‘px‘;
            }
            oBtn.onclick=function(){
                document.documentElement.scrollTop=document.body.scrollTop=0;
            }
        }
    </script>
</head>
<body>
    <div id="btn"></div>
</body>
</html>

回到顶部2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 4000px;
        }
        #btn{
            width: 40px;
            height: 40px;
            position: fixed;
            bottom: 0;
            right: 0;
            cursor: pointer;
            background: url(top_bg.png);    
            display: none;
        }
        #btn:hover{
            background-position: 0 -40px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oBtn=document.getElementById(‘btn‘);
            var screenh=document.documentElement.clientHeight||document.body.clientHeight;
            var timer=null;
            var istop=null;
            window.onscroll=function(){
                var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
                if(scrolltop>=screenh){
                    oBtn.style.display=‘block‘;
                }else{
                    oBtn.style.display=‘none‘;
                }
                if(istop){
                    clearInterval(timer);
                }
                istop=true;
            }
            oBtn.onclick=function(){
                timer=setInterval(function(){
                    var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
                    var ispeed=Math.ceil(scrolltop/5);
                    document.documentElement.scrollTop=document.body.scrollTop=scrolltop-ispeed;
                    istop=false;
                    if(scrolltop==0){
                        clearInterval(timer);
                    }
                },30);
            }
        }
    </script>
</head>
<body>
    <div id="btn"></div>
</body>
</html>

回到顶部3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 4000px;
        }
        #btn{
            width: 40px;
            height: 40px;
            position: fixed;
            bottom: 0;
            right: 0;
            cursor: pointer;
            background: url(top_bg.png);    
            display: none;
        }
        #btn:hover{
            background-position: 0 -40px;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(window).scroll(function(){
                if($(window).scrollTop()>100){
                    $(‘#btn‘).fadeIn(1000);
                }else{
                    $(‘#btn‘).fadeOut(1000);
                }
            })
            $(‘#btn‘).click(function(){
                $(‘body,html‘).animate({scrollTop:0}, 1000);
                return false;
            })
        });
    </script>
</head>
<body>
    <div id="btn"></div>
</body>
</html>

js回到顶部

标签：

原文地址：http://www.cnblogs.com/luoxiaoniu/p/4859098.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行