返回顶部简易代码
返回顶部简易代码
我们在做网站的时间,经常会遇到返回顶部的效果,鼠标滚动一定高度之后,会出现“返回顶部”的标签。“返回顶部”标签被固定到窗口的指定位置,位置始终不变。当滚动的距离高度小于指定高度后,该“返回顶部”的标签消失。另外,“返回顶部标签”绑定点击事件,通过鼠标点击,实现文档回到顶部的效果。
代码一
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> * { padding: 0; margin: 0; } .header { width: 100%; height: 100px; background: gray; text-align: center; font-size: 20px; line-height: 100px; position: fixed; left: 0; right: 0; top: 0; } .content { width: 100%; height: 1500px; background: blueviolet; text-align: center; font-size: 20px; padding-top: 100px; } .footer { width: 100%; height: 100px; background: grey; text-align: center; font-size: 20px; line-height: 100px; } .toTop { width: 70px; height: 70px; border-radius: 50%; background: greenyellow; text-align: center; line-height: 70px; /*返回顶部标签固定定位*/ position: fixed; right: 35px; bottom: 35px; z-index: 999; font-size: 14px; } .toTop:hover { background: green; font-size: 16px; cursor: pointer; color: red; } </style> </head> <body> <div class="wrapper"> <div class="header">顶部导航栏部分</div> <div class="content"> <p>div.wrapper>(div.header+div.content+div.footer+div.toTop)快速生成代码</p> <p>content部分的高度大于屏幕的高度,仅仅是为了出现滚动条而已。</p> </div> <div class="footer">底部</div> <div class="toTop">回顶部</div> </div> </body> </html> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // 初始时,“返回顶部”标签隐藏 $(".toTop").hide(); $(window).scroll(function() { // 若滚动的高度,超出指定的高度后,“返回顶部”的标签出现。 if($(document).scrollTop() >= 150) { $(".toTop").show(); } else { $(".toTop").hide(); } }) // 绑定点击事件,实现返回顶部的效果 $(".toTop").click(function() { $(document).scrollTop(0); }) }) </script>
代码二
效果
js文件
(function() { var btnId = '__gotop'; var isIE = !!window.ActiveXObject && /msie (\d)/i.test(navigator.userAgent) ? RegExp['$1'] : false; function $() { return document.getElementById(arguments[0]); } function getScrollTop() { return ('pageYOffset' in window) ? window.pageYOffset : document.compatMode === "BackCompat" && document.body.scrollTop || document.documentElement.scrollTop ; } function bindEvent(event, func) { if (window.addEventListener) { window.addEventListener(event, func, false); } else if (window.attachEvent) { window.attachEvent('on' + event, func); } } bindEvent('load', function() { var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px;cursor:pointer;display:none;'; if (isIE && isIE < 7) { css += '_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))'; var style = document.createStyleSheet(); style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}'; } var html = '<div style="height: 0;width: 0;border:14px solid #999999;border-top: 0 none;border-bottom:14px solid #fff;position: relative;margin:12px 0 0 11px;"><div style="width:8px;height:7px;position:absolute;top:14px;left:-4px;background-color:#fff;overflow: hidden;"></div></div>'; var el = document.createElement('DIV'); el.id = btnId; el.style.cssText = css; el.innerHTML = html; document.body.appendChild(el); el.onclick = function() { (function() { var top = getScrollTop(); if (top > 0) { window.scrollTo(0, top / 1.2) setTimeout(arguments.callee, 10); } })(); }; el.onmouseover = function() { $(btnId).firstChild.style.borderBottom = '14px solid #ddd'; $(btnId).firstChild.firstChild.style.backgroundColor = '#ddd'; }; el.onmouseout = function() { $(btnId).firstChild.style.borderBottom = '14px solid #fff'; $(btnId).firstChild.firstChild.style.backgroundColor = '#fff'; }; } ); bindEvent('scroll', function() { var top = getScrollTop(), display = 'none'; if (top > 0) { display = 'block'; } if ($(btnId)) $(btnId).style.display = display; }); })();
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>返回顶部按钮</title> <meta name="keywords" content=""/> <meta name="Description" content=""/> <script type="text/javascript" src="abc.js"></script> </head> <body style="height:2000px;"> </body> </html>
声明:
1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,内容难免有纰漏,一切内容仅供参考。
2.本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!
3.本站所有原创作品,包括文字、资料、图片、网页格式,转载时请标注作者与来源。
1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,内容难免有纰漏,一切内容仅供参考。
2.本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!
3.本站所有原创作品,包括文字、资料、图片、网页格式,转载时请标注作者与来源。
THE END
0
打赏
分享
二维码
海报
分享
二维码
打赏
分享海报