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>
