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

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

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

function setCss(){var a=[]a.push(".back_to_top{display:nonewidth:50pxheight:50pxoverflow:hiddenright:40pxposition:fixed bottom:50px_position:absolute_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-134))}\n")a.push(".back_to_top a{display:inline-blockwidth:50pxheight:50pxoverflow:hiddenbackground: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,aif(window.pageYOffset){a=window.pageYOffsetb=window.pageXOffset}else{if(document.documentElement&&document.documentElement.scrollTop){a=document.documentElement.scrollTopb=document.documentElement.scrollLeft}else{if(document.body){a=document.body.scrollTopb=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()

很抱歉,因为没看到的你代码,所以开始随便说了几个方法,但是肯定是对的。现在修改回答你。

因为你开始style样式表只写了body,html标签的Margin和padding为0,

P是只带marign和padding属性的,所以,你应该这样写。

你的P 类名为class="title", 那么 你需要在在style增加样式.title{margin:0 padding:0}

这样就不会用白色的外边距了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7331727.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存