jq返回顶部多种实现方法

直接上代码，复制运行即可

基础版：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回顶部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10        #goToTop { position: fixed; bottom: 20px; right: 10%; }
11       #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是头部</div>
17         <div class="content">我是主内容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19         <div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>
20     </div>
21     <script>
22     // 原始版
23     $(function(){
24         $(‘#goToTop a‘).click(function(){
25             $(‘html , body‘).animate({scrollTop: 0},‘slow‘);
26         });
27     });
28     </script>
29 </body>
30 </html>

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

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回顶部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10        #goToTop { position: fixed; bottom: 20px; right: 10%; }
11       #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是头部</div>
17         <div class="content">我是主内容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19         <div id="goToTop"><a href="javascript:;">点我返回顶部</a></div>
20     </div>
21     <script>
22     // 改进版
23     $(function(){
24
25         $(‘#goToTop‘).hide();        //隐藏go to top按钮
26
27         $(window).scroll(function(){
28             // console.log($(this).scrollTop());
29
30             //当window的scrolltop距离大于1时，go to
31             if($(this).scrollTop() > 100){
32                 $(‘#goToTop‘).fadeIn();
33             }else{
34                 $(‘#goToTop‘).fadeOut();
35             }
36         });
37
38         $(‘#goToTop a‘).click(function(){
39             $(‘html ,body‘).animate({scrollTop: 0}, 300);
40             return false;
41         });
42
43
44
45     });
46     </script>
47 </body>
48 </html>

加强版：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回顶部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10        #goToTop {position: absolute; right: -130px; z-index: 9000; }
11       #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是头部</div>
17         <div class="content">我是主内容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19     </div>
20     <script>
21     // 加强版（兼容性基本完好）
22     $(function(){
23
24         //goToTop距浏览器顶端的距离，这个距离可以根据你的需求修改
25         var topDistance = 500;
26
27         //距离浏览器顶端多少距离开始显示goToTop按钮，这个距离也可以修改，但不能超过浏览器默认高度，为了兼容不同分辨率的浏览器，我建议在这里设置值为1；
28         var showDistance = 1;
29
30         //定义一个变量，方便后面加入在html元素标签中插入这个goToTop按钮的标签
31         var goToTopButton = $(‘<div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>‘);
32
33         var thisTop = $(window).scrollTop() + topDistance;
34
35         //在container的div里插入我们前面定义好的html标签元素
36         $(‘.container‘).append(goToTopButton);
37
38         //设置goToTop按钮top的css属性和属性值
39         $(‘#goToTop‘).css(‘top‘ ,thisTop);
40
41         if($(window).scrollTop() < showDistance){
42             $(‘#goToTop‘).hide();
43         }
44
45         // 给窗口绑定一个滚动事件，当窗口滚动条滚动时执行
46         $(window).scroll(function(){
47
48             // console.log($(this).scrollTop());
49
50             thisTop = $(this).scrollTop() + topDistance;        //获取当前window向上滚动的距离
51             $(‘#goToTop‘).css(‘top‘, thisTop);                    //修改goToTop按钮的top距离
52
53             console.log(thisTop);
54
55             if($(this).scrollTop() > showDistance){
56                 $(‘#goToTop‘).fadeIn();
57             }else{
58                 $(‘#goToTop‘).fadeOut();
59             }
60
61         });
62
63
64         // 给按钮绑定一个click事件，点击按钮时，返回顶部
65         $(‘#goToTop a‘).click(function(){
66             $(‘html ,body‘).animate({scrollTop: 0}, 300);
67             return false;
68         });
69     });
70     </script>
71 </body>
72 </html>

插件版1：

<!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>
    // 编写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>

插件版2：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回顶部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10        #goToTop { position: fixed; right: 10%; z-index: 9000; bottom: 10px; }
11       #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是头部</div>
17         <div class="content">我是主内容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19     </div>
20     <script type="text/javascript">
21    //编写一个插件叫做goToTop
22     jQuery.fn.goToTop = function(settings) {
23         settings = jQuery.extend({
24             min: 1,  //设置距离顶部的最小值为1
25             fadeSpeed: 200,  //设置一个淡出淡入的速度
26             ieOffset: 50  //处理IE的兼容问题
27         },settings);
28         return this.each(function(){
29             //listen for scroll
30             var el = $(this);
31             el.css("display","none");//in case the user forgot
32             $(window).scroll(function(){
33                 //stupid IE hack
34                 if(!jQuery.support.hrefNormalized) {  //设置这个按钮的css属性
35                     el.css({
36                         "position": "absolute",
37                         "top" : $(window).scrollTop() + $(window).height() - settings.ieOffset
38                     });
39                 }
40
41
42                 if($(window).scrollTop() >= settings.min) {
43                     el.fadeIn(settings.fadeSpeed);
44                 } else {
45                     el.fadeOut(settings.fadeSpeed);
46                 }
47             });
48         });
49     };
50
51
52     $(function(){
53         var goToTopButton = "<div id=‘goToTop‘><a href=‘javascript:;‘>点我回到页面顶部</a></div>";
54         $("div.container").append(goToTopButton);  //插入按钮的html标签
55         if($(window).scrollTop() < 1) {
56             $("#goToTop").hide();//滚动条距离顶端的距离小于showDistance是隐藏goToTop按钮
57         }
58
59
60         $("#goToTop").goToTop({
61             min:1,
62             fadeSpeed: 500
63         });
64
65
66         $("#goToTop").click(function(e){
67             e.preventDefault();
68             $("html,body").animate({scrollTop:0},"slow");
69         });
70     });
71 </script>
72 </body>
73 </html>

另外一个版本实现：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回顶部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10         #goToTop {  position: fixed; right: 10%; z-index: 9000; top: 100%; margin-top: -50px;}
11         #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是头部</div>
17         <div class="content">我是主内容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19     </div>
20     <script type="text/javascript">
21          $(function(){
22             var topPosition = "<div id=‘top‘></div>"; //定义顶部锚点的标签
23             var goToTopButton = "<div id=‘goToTop‘><a href=‘#‘>点我回到页面顶部</a></div>";  //定义按钮标签
24             $("div.container").prepend(topPosition); //在container的div最前面加上锚点标签
25             $("div.container").append(goToTopButton); //在container的div最后面加上按钮标签
26             if($(window).scrollTop() < 1) {
27                 $("#goToTop").hide();  //滚动条距离顶端的距离小于showDistance是隐藏goToTop按钮
28             }
29             var scroll_timer;
30             var displayed = false;
31             var $window = $(window);
32             var top = $(".container").children(0).position().top;
33             $window.scroll(function(){
34                 window.clearTimeout(scroll_timer);
35                 scroll_timer = window.setTimeout(function(){
36                     if($window.scrollTop() <= top) {
37                         displayed= false;
38                         $("#goToTop").fadeOut(500);
39                     } else if(displayed == false) { //show if scrolling down
40                         displayed = true;
41                         $("#goToTop").stop(true,true).show().click(function(){
42                             $("#goToTop").fadeOut(500);
43                         });
44                     }
45                 },100);
46             });
47         });
48     </script>
49 </body>
50 </html>
时间： 2024-11-12 15:49:45

jq返回顶部多种实现方法的相关文章

Web前端 页面功能——点击按钮返回顶部的实现方法

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) html代码 <a href="javascript:scroll(0,0)">

网页返回顶部之animate方法

点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{width:45px; height:45px; position: fixed; left:50%; bottom:120px; border:solid 1px #ccc; background: #fff; margin-left: 600px; text-align: center; line-hei

jq返回顶部

今天发工资了,哎,更加坚定我要努力的学习,没资本,只能玩技术了.人呢,想的的开,才行,虽然有些不甘心,不过确实,现在的技术只值这个 价格.不过做到问心无愧就够了,不然人之贪婪,真的收也收不回.好了,今天的回顶部,不是以往的,锚点到顶部,而是用js来控制,d第一个关键呢,就 是scrollTop=0:事件对象呢,是 body和html,第二个呢,就是到顶部之后呢,隐藏.判断条件就是 $(window).height == $(window).height(). 好了直接上例子(注意右下角) <sc

原生JavaScript实现返回顶部的通用方法

function backTop(btnId) { var btn = document.getElementById(btnId); var d = document.documentElement; var b = document.body; window.onscroll = set; btn.style.display = "none"; btn.onclick = function() { btn.style.display = "none"; wind

js常用返回网页顶部几种方法

一.使用锚标记 此方法最简单,只需在body下放个隐藏的锚点标记,内容如下:  代码如下 复制代码 <a name="top" id="top"></a> 然后,在网页底部放一个访问链接即可:  代码如下 复制代码 <a href="#top" target="_self">返回顶部</a> 此方法效果是一次直接跳到顶部,而且URL地址栏会显示个#top,追求完美的可使用下面方法

我要返回顶部

我觉得一个网站最不可少的小功能就是返回顶部了吧,尤其是那些长的要命,拉都拉不到尽头的,简直丧心病狂,如果没有返回顶部的按钮的话,鬼愿意原路拉回去,直接关掉走人.所以一个返回顶部的按钮还是需要的,当然,返回顶部也可以做出很多花样,本文只讨论如何返回,不管具体的外观样式,那都是后话. 以下是一些方法: 1. <a href='#'>返回顶部</a> ok,搞定,是不是觉得很坑爹,但我刚开始接触的时候就是用这个方法的,简单暴力直接,就是硬生生的直接跳回去,不好看,没有美感,而且直接这样不

页面返回顶部功能的实现

这是一个小小的功能,jQuery实现的话很简单,即animate()方法,特地记录一下. 首先贴一下返回顶部的功能代码: 方法一: 1 $(function(){ 2 $("#toTop").click(function(){ 3 $("html").animate({"scrollTop": "0px"},100); //IE,FF 4 $("body").animate({"scrollTop

转载 | 网页中返回顶部代码(多种方法)

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) <a href="javascript:scroll(0,0)">返回顶部</a>

返回顶部的3中方法（解决移动端使用zepto没有滑动的效果）

点击返回顶部,三种方法 1.这个方法jQuery使用正常,zepto使用没有动画 //zepto没有动画 $("body").animate({scrollTop: 0}, 500) //zepto使用 $("body").scrollTop(0); 2.这个方法jQuery使用正常,zepto使用没有动画 window.scrollTo(0,0); 3.zepto使用可以有动画 function goTop(acceleration, time) { accele