当前位置:百问家>百科知识>html网页中怎样实现“返回顶部”的效果?

html网页中怎样实现“返回顶部”的效果?

2024-10-21 06:51:35 编辑:zane 浏览量:506

html网页中怎样实现“返回顶部”的效果?

的有关信息介绍如下:

html网页中怎样实现“返回顶部”的效果?

将下面的代码保存成一个JS文件。然后在页面里调用。其中/backtotop.gif为返回顶部的图片。

function setCss(){var a=[];a.push(".back_to_top{display:none;width:50px;height:50px;overflow:hidden;right:40px;position:fixed; bottom:50px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-134));}\n");a.push(".back_to_top a{display:inline-block;width:50px;height:50px;overflow:hidden;background:url(/backtotop.gif) 0px 0px no-repeat;}\n");a.push(".back_to_top a:hover{background-position:-50px 0px}");try{var b=document.createStyleSheet();b.cssText=a.join("");}catch(c){var b=document.createElement("style");b.type="text/css";b.textContent=a.join("");document.getElementsByTagName("HEAD").item(0).appendChild(b);}}function createLink(){var a=document.createElement("div");a.id="JS_back_to_top";a.className="back_to_top";a.innerHTML='<a rel="nofollow" href="#" ></a>';document.body.appendChild(a);}function GetPageScroll(){var b,a;if(window.pageYOffset){a=window.pageYOffset;b=window.pageXOffset;}else{if(document.documentElement&&document.documentElement.scrollTop){a=document.documentElement.scrollTop;b=document.documentElement.scrollLeft;}else{if(document.body){a=document.body.scrollTop;b=document.body.scrollLeft;}}}return{x:b,y:a};}if(window.attachEvent){window.attachEvent("onscroll",backToTop);}else{window.addEventListener("scroll",backToTop,false);}function backToTop(){if(GetPageScroll().y>300){document.getElementById("JS_back_to_top").style.display="block";}else{document.getElementById("JS_back_to_top").style.display="none";}}setCss();createLink();

版权声明:文章由 百问家 整理收集,来源于互联网或者用户投稿,如有侵权,请联系我们,我们会立即处理。如转载请保留本文链接:https://www.baiwenjia.com/article/184306.html
热门文章