jquery - quay lại đầu trang

Question

Tôi thấy mẫu fiddle này here

Tôi muốn khi "lên đầu" xuất hiện, một lần nhấp! nên di chuyển đến đầu suôn sẻ hoặc chậm

$(window).scroll(function() { 
    if ($(this).scrollTop()) { 
     $('#toTop').fadeIn(); 
    } else { 
     $('#toTop').fadeOut(); 
    } 
}); 

Answer 1

$("#toTop").click(function() { 
    //1 second of animation time 
    //html works for FFX but not Chrome 
    //body works for Chrome but not FFX 
    //This strange selector seems to work universally 
    $("html, body").animate({scrollTop: 0}, 1000); 
}); 

http://jsfiddle.net/fjXSq/161/

Answer 2

Updated JSFiddle with solution

$(window).scroll(function() { 
    if ($(this).scrollTop()) { 
     $('#toTop').fadeIn(); 
    } else { 
     $('#toTop').fadeOut(); 
    } 
}); 

$("#toTop").click(function() { 
    $("html, body").animate({scrollTop: 0}, 1000); 
}); 

Answer 3

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     if ($(this).scrollTop() > 100) { 
      $('#toTop').fadeIn(); 
     } else { 
      $('#toTop').fadeOut(); 
     } 
    }); 
    $('#toTop').click(function(){ 
     $("html, body").animate({ scrollTop: 0 }, 600); 
     return false; 
    }); 
}); 

sống demo, đầy đủ kịch bản và hướng dẫn có thể được kiểm tra từ đây - Back to top button using jQuery and CSS

Answer 4

Đầu tiên cho phép tạo nút.

<a href="#" class="scrollToTop">Scroll To Top</a> 

Bây giờ, chúng tôi có thể tạo kiểu cho nút bằng CSS sau.

<style> 
.scrollToTop{ 
    width:100px; 
    height:130px; 
    padding:10px; 
    text-align:center; 
    background: whiteSmoke; 
    font-weight: bold; 
    color: #444; 
    text-decoration: none; 
    position:fixed; 
    top:75px; 
    right:40px; 
    display:none; 
    background: url('arrow_up.png') no-repeat 0px 20px; 
} 
.scrollToTop:hover{ 
    text-decoration:none; 
} 
</style> 

Sao chép và dán phần sau vào tệp Javascript để thêm chức năng Javascript.

<script> 
$(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; 
    }); 

}); 
</script> 

Answer 5

See JS Fiddle

 $(window).on("scroll",function() { 
     if ($(this).scrollTop() > 50) { 
      $('#toTop').fadeIn(400); 
     } else { 
      $('#toTop').fadeOut(400); 
     } 
    }); 

    $("#toTop").on("click",function() { 
     $("html, body").animate({scrollTop: 0}, 1200); 
    });