JSFiddle - React, Tailwind, and code Playground

by chen644733521

HTML

<div style="height: 3000px; background-color:black"></div> <a href="javascript:void(0)" target="_self" id="toTop" title="返回顶部" style="display: none;"></a>

CSS

#toTop {
      background-image: url(http://images.cnblogs.com/cnblogs_com/ChenXu-net/517141/o_Backtop.png);
  }
  #toTop {
      width: 54px;
      height: 54px;
      display: none;
      position: fixed;
      _position: absolute;
      right: 25px;
      bottom: 45px;
      opacity: 0.3;
      filter: alpha(opacity=30);
  }
  #toTop:hover {
      opacity: 1;
      filter: alpha(opacity=100);
  }

JavaScript

$(function () {
      var topBtn = $('#toTop');

      $(window).scroll(function () {
          var ss = $(document).scrollTop(),
              ww = $(window).height();
          if ($(this).scrollTop() > 300) {
              topBtn.fadeIn();
          } else {
              topBtn.fadeOut();
          }
          if ($.browser.msie && ($.browser.version == '6.0')) {
              topBtn.css("top", ss + ww - 99);
          }
      });

      topBtn.bind('click', function () {
          $(top.document.body).animate({
              scrollTop: 0
          }, 500);
      });
  })