结合setTimeout和clearTimeout，实现“返回顶部”的功能

结合setTimeout和clearTimeout，当页面停止滚动时，“返回顶部”按钮淡隐淡出。点击“返回顶部”页面以动画形式返回顶部。完美兼容ie6-11，firefox，chrome等。

html代码如下：

<a href="javascript:void(0)" id="backToTop" class="backToTop">ToTop</a>

css代码如下：

html {_background: url(about: blank);}/* 解决在ie6下颤抖的问题 */.backToTop {width: 80px; height: 80px; line-height: 80px; display: none; background: #d1d1d1; position: fixed; bottom: 20px; top: auto; right: 20px; z-index: 1200; text-align: center; cursor: pointer;}*html .backToTop {position: absolute; bottom: auto; top: expression(eval(document.documentElement.clientHeight + document.documentElement.scrollTop - this.offsetHeight - 20))}.backToTop:hover {background: #ccc; text-decoration: none;}

js代码如下：

backToTop($('#backToTop'));function backToTop(dom) {  var $backToTop = dom;  var start = null, backT = null;  backT = function() {    clearTimeout(start);    start = setTimeout(function() { //结合setTimeout和clearTimeout，当页面停止滚动时，返回顶部按钮淡隐淡出      if($(window).scrollTop() > 300) {        $backToTop.fadeIn(400);      } else {        $backToTop.fadeOut(400);      }    }, 400);  }  backT();  $(window).scroll(function() {    backT();  });  $(window).resize(function() {    backT();  });  $backToTop.on("click", function() {    $("html, body").animate({      scrollTop: "0px"    }, 200);    $backToTop.fadeOut(400);    return false;  });}

原标题：结合setTimeout和clearTimeout，实现“返回顶部”的功能

关键词：