jq返回顶部多种实现方法 - 学习资料

Home > List of blog posts > jq返回顶部多种实现方法

Blogger Information

Blog 40

fans 0

comment 1

visits 39956

Special Recommendation

More>

Related recommendations

基础版：

<!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>

资料来源：https://www.cnblogs.com/tianlongouba/p/9838205.html

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

jq返回顶部多种实现方法

2020-12-30 11:05:41