首页 > 代码库 > Js、Jquery对goTop功能的实现

Js、Jquery对goTop功能的实现

2024-10-21 19:08:39   212人阅读

本文介绍用原生JS和Jquery分别实现的网页goTopbutton功能，以及在这个过程中碰到的问题。


终于实现的效果类似：http://sc2.163.com/home（注意右下角的top）


代码：

Jquery

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{height: 2000px;}
        #goTop{
            display: none;
            cursor:pointer;
            background: url("common.png") no-repeat scroll 0 -460px;
            position: fixed;
            width: 60px;
            height: 60px;
            right: 20px;
            bottom: 20px;
            text-indent: -9999px;
            z-index: 100;
        }
        #goTop:hover{
            background-position: -100px -460px;
        }
    </style>
    <script src="http://www.mamicode.com/jQuery/jquery-1.11.3.js"></script>
    <script>
            $(function(){
                $(window).scroll(function(){
                    var scrH=document.documentElement.scrollTop+document.body.scrollTop;
                    if(scrH>200){
                        $(‘#goTop‘).fadeIn(400);
                    }else{
                        $(‘#goTop‘).stop().fadeOut(400);
                    }
                });
                $(‘#goTop‘).click(function(){
                    $(‘html,body‘).animate({scrollTop:‘0px‘},200);
                });
            });
    </script>
</head>
<body>
<a id="goTop" href="javascript:">返回顶层</a>
</body>
</html>

JS
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{height: 2000px;}
        #goTop{
            display: none;
            cursor:pointer;
            background:url("common.png") no-repeat scroll 0 -460px;
            position: fixed;
            width: 60px;
            height: 60px;
            right: 20px;
            bottom: 20px;
            z-index: 100;
            text-indent: -9999px;
        }
        #goTop:hover{
            background-position: -100px -460px;
        }
    </style>
</head>
<body>
<a id="goTop" title="返回顶部" href="javascript:scroll(0,0)">返回顶层</a>
</body>
</html>
<script>
    (function() {
        function $(id){
            return document.getElementById(id);
        }
        window.onscroll=function(){
            var scrH=document.documentElement.scrollTop+document.body.scrollTop;
            if(scrH>200){
                $(‘goTop‘).style.display=‘block‘;
            }else{
                $(‘goTop‘).style.display=‘none‘;
            }
        };
    }());
</script>

代码好像没啥特别好解释了。说说我碰到的问题吧。

①在IE低版本号下。不支持rgba属性~

②原生js的动画效果还不会实现，希望有人留言教下。


Js、Jquery对goTop功能的实现


联系
我们