回到顶部

CSDN的

<div id="d-top">
<a href="#" onclick="javascript:document.body.scrollTop=0;document.documentElement.scrollTop=0;this.blur();return false;" title="回到顶部">
<img src="
http://static.blog.csdn.net/images/top.png" alt="TOP" /></a>
</div>

 

 

<a href="javascript:scroll(0,0)">返回顶部</a>

-------------------------------------------

返回顶部 top按钮

运用jquery的一个插件就可以很好的解决超过一屏显示右下角返回顶部按钮
插件如下:scrolltopcontrol.js
scrolltopcontrol.js插件里边包括了详细的中文解释 可已根据自己的需要 修改top按钮的图片样式和位置!
很实用!

-------------------------------------

随滚动条滚动的top按钮

1.js部分:
<script type="text/javascript">
//<![CDATA[
var tips; var theTop = 600; var old = theTop;
function initFloatTips() {
  tips = document.getElementByIdx_x('floatTips');
  moveTips();
};
function moveTips() {
  var tt=50;
  if (windows.innerHeight) {
    pos = window.pageYOffset
  }
  else if (document.documentElement && document.documentElement.scrollTop) {
    pos = document.documentElement.scrollTop
  }
  else if (document.body) {
    pos = document.body.scrollTop;
  }
  pos=pos-tips.offsetTop+theTop;
  pos=tips.offsetTop+pos/10;
  if (pos < theTop) pos = theTop;
  if (pos != old) {
    tips.style.top = pos+"px";
    tt=10;
  }
  old = pos;
  setTimeout(moveTips,tt);
}
//!]]>
</script>
2.css部分:
 <style type="text/css">
div#floatTips{
    position:absolute;
    border:solid 1px #777;
    padding:3px;
    top:600px;
    width:23px;
    background:#333;
    color:white;
    opacity: 0.5;
    filter:alpha(opacity=50);
    left: 1242px;
}
</style>
3.body部分;
<body onload="initFloatTips()">
<div id="floatTips">
    <a href="javascript:;" onClick="$('html,body').animate({scrollTop:0},1000);">
<img src="images/top.gif" /></a></div>


 

你可能感兴趣的:(回到顶部)