2/14/13

"Go to top" - di chuyển lên đầu trang cho blogger - Jquery

Thủ thuật blogspot tạo di chuyển liên kết đến đầu trang của blogger không còn là mới và có khá đa dạng di chuyển GO TO TOP cho Website, blog khác nhau. Ở đây mình tạm gọi thủ thuật này là Version 1 (V1). Tùy vào sở thích của mỗi người mà chúng ta có thể lựa chọn những hiệu ứng khác nhau cho việc sử dụng liên kết di chuyển này.
Xem demo bên góc phải TẠI ĐÂY
Go to top for blogspot code javascript

Cách làm thủ thuật
(Sử dụng Jquery)
1. Vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Tìm đến </head> và dán đoạn Code dưới đây ngay trên nó

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});
//]]>
</script>
<!-- end scrolltop -->

3. Tìm đến <body> và thay thế nó bằng <body id='top'>
4. Tìm đến </body> và dán đoạn code dưới đây ngay trên nó

<div id='goingtop'>
<a href='#top' title='Go Top'><img src='http://2.bp.blogspot.com/-2f8pWxBqw-o/UR0KjYmkJ3I/AAAAAAAAJW4/xBE9uG7-6Mo/s1600/go-to-top.png' style='right:20px; bottom:20px; position: fixed;'/></a></div>

5. Lưu mẫu và xem kết quả :)

0 nhận xét:

Post a Comment