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.

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

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>

Lời kết

Đoạn jQuery khá ngắn gọn và hữu ích sẽ không ảnh hưởng nhiều đến tốc độ tải trang của bạn, không chỉ có thể sử dụng cho bài viết mà nó còn có thể sử dụng cho mọi thành phần của blog. Ngoài ra thì với hiệu ứng trượt khá thú vị sẽ không gây sự nhàm chán cho khách truy cập website của chúng ta.

3 bình luận

  1. avatar says

    lúc 00:26 21 tháng 4, 2015

    Rất hay...áp dụng cho trang này nè bác Truyền hình FPT

  2. avatar says

    lúc 14:06 23 tháng 5, 2015

    toẹt vời. blog của bạn hay quá

  3. avatar says

    lúc 08:43 22 tháng 9, 2015

    thannks max! :)

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.