Question

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

就是页面滚动到一定程度时，自动出现“返回顶部”这个按钮，注意，是到一定程度时才出现，不是一开始就有

Answer 1

将下面的代码保存成一个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 href="#" title="返回顶部"></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();

追问

是在body里加载吗？上面的三个函数要加载哪个？结尾的setCss();createLink();有什么意义吗？

Answer 2

<div id="top">顶部</div>

<a href="#top">返回顶部</a>

Answer 3

你可以百度这个jquery或者js特效看看。