回到顶部按钮

 

第一种方法：用css控制图片

  
<style type="text/css">
 #scrollBar a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../img/0121.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    cursor: pointer;
    display: block;
    height: 57px;
    overflow-x: hidden;
    overflow-y: hidden;
    text-indent: -2000em;
    width: 19px;
}
 a {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    color: #333333;
}

</style>

 

<div id="scrollBar" style="position: fixed; right: 50%; margin-right: -510px; bottom: 75px; display: block;">
    <a href="javascript:void(0)" hidefocus="true" οnclick="window.scrollTo(0,0); "  >回到顶部</a>
    <!--<a style=”display: block; margin-top: 10px;” οnclick=”$(‘html,body’).animate({scrollTop: 0}, 1000);” href=”javascript:;”>回到顶部</a>-->
  </div>

 

 

第二种方法：

<script language="javascript">
 function goTop(acceleration, time) {
  acceleration = acceleration || 0.1;
  time = time || 16;

  var x1 = 0;
  var y1 = 0;
  var x2 = 0;
  var y2 = 0;
  var x3 = 0;
  var y3 = 0;

  if (document.documentElement) {
   x1 = document.documentElement.scrollLeft || 0;
   y1 = document.documentElement.scrollTop || 0;
  }
  if (document.body) {
   x2 = document.body.scrollLeft || 0;
   y2 = document.body.scrollTop || 0;
  }
  var x3 = window.scrollX || 0;
  var y3 = window.scrollY || 0;

  // 滚动条到页面顶部的水平距离
  var x = Math.max(x1, Math.max(x2, x3));
  // 滚动条到页面顶部的垂直距离
  var y = Math.max(y1, Math.max(y2, y3));

  // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
  var speed = 1 + acceleration;
  window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

  // 如果距离不为零, 继续调用迭代本函数
  if (x > 0 || y > 0) {
   var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
   window.setTimeout(invokeFunction, time);
  }
 }
 

</script>

 

 

<a href="#" οnclick="goTop();return false;" style="font-size:15pt;color:#CC0000;text-align:right;">回到顶部</a>

 

第三种方法：

<a  οnclick="window.scrollTo(0,0);return false;" href="#top">
   返回顶部
   <img   src="../img/101.png">
  </a>
  

转载于:https://my.oschina.net/meSpace/blog/51998