jQuery实现返回顶部功能
整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图
第一种实现
一、JSP或HTML(主体结构)
在body中添加
<body id="top"> <p id="back-to-top"><a href="#top"><span></span></a></p> </body>
二、CSS(样式化)
<style> p#back-to-top { position: fixed; bottom: 50px; right: 50px; } p#back-to-top a { text-align: center; text-decoration: none; color: #d1d1d1; display: block; width: 50px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ -moz-transition: color 1s; -webkit-transition: color 1s; -o-transition: color 1s; } p#back-to-top a:hover { color: #979797; } p#back-to-top a span { background: #d1d1d1 url(/img/back_to_top.png) no-repeat center center; border-radius: 6px; display: block; height: 50px; width: 50px; margin-bottom: 5px; /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ -moz-transition: background 1s; -webkit-transition: background 1s; -o-transition: background 1s; } #back-to-top a:hover span { background: #979797 url(/img/back_to_top.png) no-repeat center center; } </style>图片自己网上找资源
三、jQuery(动态效果)
<script> $(document).ready(function() { //首先将#back-to-top隐藏 $("#back-to-top").hide(); //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function() { $(window).scroll(function() { if ($(window).scrollTop() > 100) { $("#back-to-top").fadeIn(1500); } else { $("#back-to-top").fadeOut(1500); } }); //当点击跳转链接后,回到页面顶部位置 $("#back-to-top").click(function() { $(‘body,html‘).animate({ scrollTop: 0 }, 500); return false; }); }); }); </script>
第二种实现
<style> .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity = 60); } </style>
<script> (function() { var $backToTopTxt = "返回顶部" $backToTopEle = $(‘<div class="backToTop"></div>‘).appendTo($("body")).text($backToTopTxt) .attr("title", $backToTopTxt).click(function() { $("html, body").animate({ scrollTop: 0 },120); }) $backToTopFun = function() { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0) ? $backToTopEle.show() : $backToTopEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); }); })(); </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。