css 使用jQuery动画滚动到顶部

Posted 2021-05-13

//Check to see if the window is top if not then display button
$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
    $('.scrollToTop').fadeIn();
  } else {
    $('.scrollToTop').fadeOut();
  }
});

//Click event to scroll to top
$('.scrollToTop').click(function(){
  $('html, body').animate({scrollTop : 0},800);
  return false;
});

// Here’s it all put together incase u just want to copy and paste:
$(document).ready(function(){

  //Check to see if the window is top if not then display button
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
      $('.scrollToTop').fadeIn();
    } else {
      $('.scrollToTop').fadeOut();
    }
  });

  //Click event to scroll to top
  $('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
  });

});

// Arrow
http://cdn.webdesignerhut.com/wp-content/uploads/2015/06/arrow.png

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

.scrollToTop {
    width: 40px;
    height: 40px;
    background-image: url('arrow.png');
    position:fixed;
    right: 30px;
    bottom: 30px;
    display: none;
}