Back to top | Scroll To Top

Cập nhật lần cuối 18/03/2017 by trong HTML&CSS vào 14/10/2013 có 916 Views

Back to top | Scroll To Top là gì? đó chính là thanh cuộn trang hoặc dc gọi là trở về đầu trang web.

back to top

back to top

vậy chúng ta làm như thế nào? rất đơn giản thôi. chúng ta có thể sử dụng thư viện có sẵn Jquery và một số dòng css cơ bản để làm nha …

Demo

Code HTML:

trước hết chúng ta không thể quên thư viện jquery dc…. và các bạn có thể vào đây để lấy bản mới http://jquery.com/

<div id="topcontrol"  class="scrollTo_top">

<a title="Scroll to top" href="">Lên đầu trang</a>
</div>

Code javascript:


<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
jQuery(document).ready(function($) {

//scroll to top
$('.scrollTo_top').hide();
$(window).scroll(function () {
if( $(this).scrollTop() > 100 ) {
$('.scrollTo_top').fadeIn(300);
}
else {
$('.scrollTo_top').fadeOut(300);
}
});

$('.scrollTo_top a').click(function(){
$('html, body').animate({scrollTop:0}, 500 );
return false;
});
});
</script>

Chúc các bạn thành công!

Back to top | Scroll To Top
3 (60%) 2 votes
  • Bình luận
Có thể bạn quan tâm
x