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

就是页面滚动到一定程度时,自动出现“返回顶部”这个按钮,注意,是到一定程度时才出现,不是一开始就有... 就是页面滚动到一定程度时,自动出现“返回顶部”这个按钮,注意,是到一定程度时才出现,不是一开始就有 展开
 我来答
Sucoh
2013-03-04 · TA获得超过1014个赞
知道小有建树答主
回答量:1211
采纳率:0%
帮助的人:464万
展开全部

将下面的代码保存成一个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();有什么意义吗?
大莆田手机网
2013-03-04 · TA获得超过1178个赞
知道小有建树答主
回答量:1747
采纳率:85%
帮助的人:713万
展开全部
<div id="top">顶部</div>

<a href="#top">返回顶部</a>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
案例之家
2013-03-04 · 知识、共享、共建、共赢
案例之家
采纳数:8 获赞数:13

向TA提问 私信TA
展开全部
你可以百度这个jquery或者js特效看看。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式