正文
回到顶部按钮的css代码 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 href="#" title="返回顶部"/a';document.body.appendChild(a);}function GetPageScroll(){var b,a;if(window.pageYOffset){a=window.pageYOffset;b=window.pageXOffset;}else{if(document.documentElementdocument.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().y300){document.getElementById("JS_back_to_top").style.display="block";}else{document.getElementById("JS_back_to_top").style.display="none";}}setCss();createLink();
相关问答
Q1: html CSS回到顶部代码，改成距离顶部100PX
代码：p class="backtop"a href="#"回到顶部/a/p
CSS：
.backtop{position:fixed;right:0;top:100px;}
Q2: 给网页加一个返回顶部的按钮
div id="goTopBtn" title="Top" style="bottom: 130px;"
/div
script type="text/javascript"
$(window).scroll(function () {
var sc = $(window).scrollTop();
var rwidth = $(window).width(); //当前页面宽度
var iwidth = $("#goTopBtn").width(); //top图片宽度
var swidth = (rwidth - 980) / 2; //计算主体内容距离左边框空白区宽度
if (sc 0) {
$("#goTopBtn").css("display", "block");
$("#goTopBtn").css("left", (980 + swidth) + "px");
} else {
$("#goTopBtn").css("display", "none");
}
}
$("#goTopBtn").click(function () {
var sc = $(window).scrollTop();
$('body,html').animate({ scrollTop: 0 }, 500);
})
/script
Q3: css 当鼠标点击插入的图片时网页回到头部
js吧
网页编程中时常会用到返回网页顶部代码，返回顶部方法只有两种：一种是直接跳转到顶部，二是采用JS添加滚动效果，关于代码方面，天缘一贯的理念，少写点废话，尽量在代码量和体验方面寻求平衡，与其花大力气写个二三十行代码去返回顶部，不如把精力放在改善网站内容方面。
一、使用锚标记
此方法最简单，只需在body下放个隐藏的锚点标记，内容如下：
代码如下
复制代码
a name="top" id="top"/a
然后，在网页底部放一个访问链接即可：
代码如下
复制代码
a href="#top" target="_self"返回顶部/a
此方法效果是一次直接跳到顶部，而且URL地址栏会显示个#top，追求完美的可使用下面方法。
二、使用JS scrollTo函数
javascript scroll函数（scrollBy scrollTo）是用来滚动页面到指定位置，格式定义如下：
■scrollBy(xnum,ynum)
■scrollTo(xpos,ypos)
其中：
■xnum，ynum分别指水平、垂直滚动多少像素，正值表示向右或向下滚动，负值表示向左或向上滚动
■xpos，ypos分别指水平和垂直坐标
使用示例：
代码如下
复制代码
a href="javascript:scrollTo(0,0);"返回顶部/a
三、scrollBy慢速滚动返回顶部
本方式使用上面提到的scrollBy函数，每次只滚动定量像素，整体看起来有点滚动效果，代码如下：
代码如下
复制代码
var sdelay=0;
function returnTop() {
window.scrollBy(0,-100);//Only for y vertical-axis
if(document.body.scrollTop0) {
sdelay= setTimeout('returnTop()',50);
}
}
scrollBy函数第二个参数我设了-100，越大（比如-10）滚动越慢，越小滚动越快，启动滚动只需在页面底部加个链接：
代码如下
复制代码
a href="javascript:returnTop();"返回顶部/a
JQuery实现返回顶部功能
首先需要在顶部添加如下html元素：
p id="back-to-top"a href="#top"span/span返回顶部/a/p
其中a标签指向锚点top，可以在顶部防止一个a name="top"/a的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。
Q4: css3中怎么做返回顶部
重点是go-top的CSS定义：
div.go-top { display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 113px;
left: 90%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 38px;
height: 38px;
background-color: #eddec2;
border-radius: 3px;
cursor: pointer;}div.go-top:hover { opacity: 1;
filter: alpha(opacity=100);}div.go-top div.arrow { position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #cc3333;}div.go-top div.stick { position: absolute;
left: 15px;
top: 15px;
width: 8px;
height: 14px;
display: block;
background-color: #cc3333;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;}
使用fixed定位，让按钮始终出现在右下角，通过设定left:90%可以使按钮在右方出现，但又不会太紧贴滚动条。
按钮默认不可见，当滚动页面到一定高度后，按钮出现，这里用jQuery实现
$(function() { $(window).scroll(function() { if ($(window).scrollTop() 1000) $('div.go-top').show(); else
$('div.go-top').hide();
}); $('div.go-top').click(function() { $('html, body').animate({scrollTop: 0}, 1000);
});
});
当按下按钮时，有动画效果返回顶部
回到顶部按钮的css代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html中回到顶部用了什么功能、回到顶部按钮的css代码的信息别忘了在本站进行查找喔。
