jq返回顶部多种实现方法

本文转载自查看原文 2018-10-23 18:02 1940 jquery

基础版：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
       .content { height: 2000px; border: 1px solid red; }
       #goToTop { position: fixed; bottom: 20px; right: 10%; }
      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #FF9966; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }
     </style>
</head>
<body>
    <div class="container">
        <div class="header"> 我是头部</div>
        <div class="content">我是主内容，高度是2000px</div>
        <div class="footer">我是在最底部</div>
        <div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>
    </div>
    <script>
    // 原始版
    $(function(){
        $('#goToTop a').click(function(){
            $('html , body').animate({scrollTop: 0},'slow');
        });
    });
    </script>
</body>
</html>

改进版：默认不显示，滚动到一定距离显示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
       .content { height: 2000px; border: 1px solid red; }
       #goToTop { position: fixed; bottom: 20px; right: 10%; }
      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #ff0; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }
     </style>
</head>
<body>
    <div class="container">
        <div class="header"> 我是头部</div>
        <div class="content">我是主内容，高度是2000px</div>
        <div class="footer">我是在最底部</div>
        <div id="goToTop"><a href="javascript:;">点我返回顶部</a></div>
    </div>
    <script>
    // 改进版
    $(function(){

        $('#goToTop').hide();        //隐藏go to top按钮

        $(window).scroll(function(){
            // console.log($(this).scrollTop());

            //当window的scrolltop距离大于1时，go to 
            if($(this).scrollTop() > 100){
                $('#goToTop').fadeIn();
            }else{
                $('#goToTop').fadeOut();
            }
        });

        $('#goToTop a').click(function(){
            $('html ,body').animate({scrollTop: 0}, 300);
            return false;
        });



    });
    </script>
</body>
</html>

加强版：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
       .content { height: 2000px; border: 1px solid red; }
       #goToTop {position: absolute; right: -130px; z-index: 9000; }
      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #ff0; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }
     </style>
</head>
<body>
    <div class="container">
        <div class="header"> 我是头部</div>
        <div class="content">我是主内容，高度是2000px</div>
        <div class="footer">我是在最底部</div>
    </div>
    <script>
    // 加强版（兼容性基本完好）
    $(function(){

        //goToTop距浏览器顶端的距离，这个距离可以根据你的需求修改
        var topDistance = 500;

        //距离浏览器顶端多少距离开始显示goToTop按钮，这个距离也可以修改，但不能超过浏览器默认高度，为了兼容不同分辨率的浏览器，我建议在这里设置值为1；
        var showDistance = 1;

        //定义一个变量，方便后面加入在html元素标签中插入这个goToTop按钮的标签
        var goToTopButton = $('<div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>');

        var thisTop = $(window).scrollTop() + topDistance;

        //在container的div里插入我们前面定义好的html标签元素
        $('.container').append(goToTopButton);

        //设置goToTop按钮top的css属性和属性值
        $('#goToTop').css('top' ,thisTop);

        if($(window).scrollTop() < showDistance){
            $('#goToTop').hide();
        }

        // 给窗口绑定一个滚动事件，当窗口滚动条滚动时执行
        $(window).scroll(function(){

            // console.log($(this).scrollTop());

            thisTop = $(this).scrollTop() + topDistance;        //获取当前window向上滚动的距离
            $('#goToTop').css('top', thisTop);                    //修改goToTop按钮的top距离

            console.log(thisTop);

            if($(this).scrollTop() > showDistance){
                $('#goToTop').fadeIn();
            }else{
                $('#goToTop').fadeOut();
            }

        });


        // 给按钮绑定一个click事件，点击按钮时，返回顶部
        $('#goToTop a').click(function(){
            $('html ,body').animate({scrollTop: 0}, 300);
            return false;
        });
    });
    </script>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jq返回顶部多种实现方法 jq-animate实现返回顶部效果 jQ 移动端返回顶部代码整理 a超链接之返回顶部的两种实现方法 Web前端页面功能——点击按钮返回顶部的实现方法 ActionBar实现顶部返回键，顶部按钮 js返回上一页并刷新的多种实现方法页面返回顶部的方法总结 JavaScript实现返回顶部效果 CSS实现返回网页顶部