HIỆU ỨNG TRƯỢT ĐẾN NƠI ĐƯỢC CHỈ ĐỊNH CHO BLOGGER

Mỗi người chúng ta đều có cho mình một cách trình bày bài viết riêng không ai giống ai. Nhưng đa phần đối với những bài viết dài, thường thì chúng ta sẽ liệt kê các mục cho người dùng có thể dễ dàng xác định vị trí của mục đó và cả thêm nút trở về đầu trang cho khách truy cập dễ thao tác.

Nhưng với việc tìm kiếm các mục đôi khi cũng có phần đôi chút rác rối, do đó để đơn giản hóa vấn đề này cho khách truy cập hôm nay mình sẽ giới thiệu đến các bạn cách để chuyển người dùng đến vị trí mà họ mong muốn, đặc biệt là với hiệu ứng trượt sẽ xóa bỏ đi được sự nhàm chán cho blog của bạn.

Hiệu ứng trượt đến nơi được chỉ định cho Blogger

Cài vào Blogger

Đầu tiên đăng nhập vào Blogger »  Mẫu » Chỉnh sửa HTML

Tiếp đến tìm đến thẻ </head> và thêm đoạn mã sau lên trên

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('a[href^="#"]').on('click',function (e) {
     e.preventDefault();

     var target = this.hash,
     $target = $(target);

     $('html, body').stop().animate({
         'scrollTop': $target.offset().top
     }, 900, 'swing', function () {
         window.location.hash = target;
     });
 });
});
</script>

nếu template của bạn đã sẵn có mã chèn jQuery rồi thì bạn có thể xóa bỏ dòng đầu tiên, nếu bạn không chắc thì cứ để lại cũng được, không vấn đề gì.

Hướng dẫn sử dụng

Để sử dụng khá là đơn giản bạn chỉ cân tạo thẻ div với id mà bạn định sẵn. Ví dụ mình có mục "Dịch vụ"

<div id="dichvu">Dịch vụ</div>

bây giờ đẻ trượt đến vị trí của mục dịch vụ có id như trên bạn tạo một thẻ a nó nội dung như sau

<a href="#dichvu">Chuyển đến mục dịch vụ</a>

và như bạn đã thấy mình thêm # vài trước tên id mà bạn chọn cho thẻ div và thêm nó vào thuộc tính href của thẻ, bây giờ chỉ cần người dùng nhắp vào thì trình duyệt sẽ tự động chuyển đến đó.

Nếu đã hiểu phần mà mình nói ở trên thì bạn có thể chuyển đến mọi nơi trong blog của bạn, việc bạn cần làm chỉ là xác định id của vị trí mà bạn mong muốn, ví dụ như ở phần nhận xét có id là comments bạn muốn chuyển đến phần nhận xét

<a href="#comments ">Chuyển đến nhận xét</a>