热门
立即入驻

jquery返回网站顶部方法大全

随心笔谈4个月前更新 admin
180 00
🌐 经济型：买域名、轻量云服务器、用途：游戏 网站等 《腾讯云》特点：特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型：买域名、轻量云服务器、用途：游戏 网站等 《阿里云》特点：中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型：买域名、轻量云服务器、用途：游戏 网站等 《西部数码》 特点：比上两家略贵但是稳定性超好事也少 点我优惠购买

文章摘要

这篇文章介绍了一个返回顶部功能的实现，分为四个版本，分别从基础功能到兼容性和可扩展性进行了优化。以下是各版本的简要总结： 1. **基础版（原文1）** 实现了一个简单的返回顶部功能，页面结构清晰，代码简洁。用户点击按钮即可返回到页面顶部。 2. **基础升级版（原文2）** 在基础版的基础上，增加了动态滚动效果。当滚动到一定距离时（距离大于100px），返回顶部按钮会显示；否则会隐藏按钮。这种设计提升了用户体验。 3. **兼容性版（原文3）** 在保留核心功能的同时，加强了对浏览器兼容性的优化。通过调整按钮位置和滚动距离的设置，确保在不同设备和分辨率下都能正常工作。 4. **小型插件版（原文4）** 使用jQuery插件实现返回顶部功能，代码更加灵活和 reusable。该插件在滚动时动态显示按钮，并在点击按钮时执行返回顶部的行为。 总结：文章从基础功能出发，逐步优化，最终提供了功能全面且兼容性好的返回顶部实现方案。

1、基础版，只带返回顶部功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html>
<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>
        <div> 我是头部</div>
        <div>我是主内容，高度是2000px</div>
        <div>我是在最底部</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>

2、基础升级版，默认不显示，滚动到一定距离显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
<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>
        <div> 我是头部</div>
        <div>我是主内容，高度是2000px</div>
        <div>我是在最底部</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>

3、兼容性版，加强浏览器兼容性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html>
<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>
        <div> 我是头部</div>
        <div>我是主内容，高度是2000px</div>
        <div>我是在最底部</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>

4、小型插件版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html>
<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>
        <div> 我是头部</div>
        <div>我是主内容，高度是2000px</div>
        <div>我是在最底部</div>
        <div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>
    </div>
    <script>
    // 编写jQuery返回顶部插件
    jQuery.fn.goToTop = function(){
        
        // 判断如果窗口滚动距离小于0，隐藏按钮
        if($(window).scrollTop() < 0){
            $('#goToTop').hide();
        }
        // 窗口滚动时，判断当前窗口滚动距离
        $(window).scroll(function(){
            if($(this).scrollTop() > 1){
                $('#goToTop').fadeIn();
            }else{
                $('#goToTop').fadeOut();
            }
        });
        // 给这个按钮绑定一个click事件
        this.bind('click',function(){
            $('html ,body').animate({scrollTop: 0},500);
            return false;
        });
    };
    //调用这个插件
    $(function(){
        $('#goToTop').goToTop();
    });
    </script>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

添加小工具
点此为“正文侧边栏”添加小工具