Hướng dẫn Tìm hiểu và sử dụng jQuery.ScrollTo

[PVS]

Tìm hiểu và sử dụng jQuery.ScrollTo

jQuery.ScrollTo là một hiệu ứng rất đẹp. Tuy nhiên, khi các bạn vào trang chủ của jQuery.ScrollTo thì các hướng dẫn rất khó áp dụng vào các project của bạn. Trong bài viết này, mình sẽ hướng dẫn các bạn cách sử dụng jQuery.ScrollTo một cách đơn giản nhất.

Giờ chúng ta sẽ setup một trang web demo.
HTML:

<section id="no1">
    <h1>Izwebz</h1>
    <h2>take it easy</h2>
    <h3><a class="scrollTo" href="#no2">Next No 2</a></h3>
</section>
<!-- ./end No1 -->
 
<section id="no2">
    <h3><a class="scrollTo" href="#no3">Next No 3</a></h3>
</section>
<!-- ./end No2 -->
 
<section id="no3">
    <h3><a class="scrollTo" href="#no4">Next No 4</a></h3>
</section>
    <!-- ./end No3 -->
 
<section id="no4">
    <h3><a class="scrollTo" href="#no1">Next No 1</a></h3>
</section>
<!-- ./end No4 -->

CSS:

body{
    font-family: Roboto;
    font-size:15px;
}
section{
    position: relative;
    display: block;
    /*float: left;*/
    width: 1280px;
    height: 800px;
}
section a{
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
}
section#no1{
    background-color:#88A33E;
    color: #FFF;
    text-align: center;
}
section#no1 h1{
    text-transform: uppercase;
    font-size: 100px;
    text-shadow:2px 2px 0 #515151;
}
section#no1 h2{
    text-transform: uppercase;
    font-size: 35px;
    font-weight: normal;
    margin-bottom: 25px;
    text-shadow:1px 1px 0 #515151;
}
section h3{
    text-align: center;
    background-color: #fff;
    color: #88A33E;
    line-height: 100px;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
section#no2{
    background-color:#1E7365;
}
section#no3{
    background-color:#FFC237;
}
section#no4{
    background-color:#541E32;
}

Sau khi đã hoàn thành xong 2 phần này thì bạn có thể test để xem demo nhé. Giờ mình sẽ giải thích một xíu nhé.

Các bạn xem code html section#no1.
Trong thẻ a, thuộc tính href=”#no2″: có nghĩa là, khi các bạn nhấn vào link đó thì nó sẽ chuyển sang khu vực có id là #no2. Tương tự như vậy, nếu bạn để href=”#no3″ thì nó sẽ chuyển sang khu vực nó id là #no3.

Bây giờ chúng ta sẻ áp dụng jQuery.ScrollTo vào.

jQuery(document).ready(function($) {
    // Call & Apply function scrollTo
    $('a.scrollTo').click(function () {
        $('body').scrollTo($(this).attr('href'), 800);
        return false;
    });
});

Ở đoạn code trên thì có ý nghĩa như thế này? Khi click vào thẻ a có class là scrollTo nó sẽ lấy thuộc tính href của thẻ a đó làm #id đích và sử dụng scrollTo để đi tới đó.

Ví dụ:

<a class="scrollTo" href="#no2">Next No 2</a>

Cụ thể hơn, trong cái thẻ trên thì nó sẽ hoạt động thế này. Khi nhấp vào thẻ a.scrollTo nó sẽ lấy giá trị của href làm #id đích để scrollTo() đi tới đó.
Còn 800 thì đó là thời gian chuyển động tới #ID đích. Tính bằng mili giây (ms) 1000ms = 1s.

Và tất nhiên, jquery scrollTo có thể chuyển động theo nhiều chiều hướng khác nhau như dọc, ngang, chéo điều đó phụ thuộc vào vị trí của thẻ div đang hiển thị.

Với đoạn code trên, các bạn edit thêm một tý css và jquery nhé.

Trước tiên, un-comment dòng /*float: left;*/ ở css của section.
Sau đó, chúng ta dùng Jquery để định hình thêm vài cái nữa nhé.

function wah(){
    var sec = $("section");
    var width = $(window).width(); // lấy giá trị ngang màng hình hiện tại
    var height = $(window).height();// lấy giá trị dọc màng hình hiện tại
    $("body").css('width', width*2); // gán thuộc tính ngang cho màng hình là width*2
    sec.css({'width': width,'height':height}); // lấy giá dọc và ngang cho section
}
wah(); // Gọi chạy function width và height
 
// Thay đổi width & height khi thay đổi màng hình
$(window).resize(function(){
    wah(); // Gọi chạy function width và height
})

Chú thích mình đã comment trong code rồi nhé.

Vậy là bây giờ chúng ta đã có 1 website theo phong cách cực quốc tế nhé.

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

Nguồn: izwebz.com​