Chuyển code từ jQuery sang JS thuần

ttn · February 11, 2018, 1:20am

Chào các bạn, mình có 1 đoạn code nhỏ như thế này
mình có 1 cái nav menu, khi click vào link nào thì nó sẽ cuộn đến cái section ở phía bên dưới:

<div class="nav">
    <a href="#section-1" class="nav-item">A section</a>
    <a href="#section-2" class="nav-item">B section</a>
    <a href="#section-3" class="nav-item">C section</a>
    <a href="#section-4" class="nav-item">D section</a>
</div>

và mấy cái section tương ứng như thế này

<div id="section-1">
    Section 1
</div>
<div id="section-2">
    Section 2
</div>
<div id="section-3">
    Section 3
</div>
<div id="section-4">
    Section 4
</div>

sử dụng jQuery thì chạy ok

jQuery( '.nav' ).on( 'click', 'a', function ( e ) {
    e.preventDefault();

    var target = jQuery( this ).attr( 'href' );

    jQuery( 'html, body' ).stop().animate( {
        scrollTop: jQuery( target ).offset().top
    }, 500 );

    return false;
} );

nhưng mình thay bằng đoạn code js này thì ko chạy, ko biết mình thiếu hoặc sai cái gì mà code ko chạy

function scrollTo( element, to, duration ) {
    if ( duration < 0 ) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

    setTimeout( function () {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo( element, to, duration - 2 );
    }, 10 );
}

var demo = document.getElementsByClassName( 'nav-item' );
for ( var q = 0; q < demo.length; q++ ) {
    demo[ q ].addEventListener( 'click', function ( e ) {
        e.preventDefault();

        var _a = this.getAttribute( 'href' ).substr( 1 );
        scrollTo( document.getElementById( _a ), 0, 100 );
    } );
}

Mình có ném đoạn code lên Codepen, bạn nào rảnh qua xem giúp mình nhé

Sử dụng jQuery:

Sử dụng JS thuần:

Quan_Tran · February 12, 2018, 2:37pm

Bạn dùng element.offsetTop nhé (hoặc xem lại thử, lâu rồi ko chú ý).
Chứ bạn dùng scrollTop là trả về 0 này.

ttn · February 12, 2018, 3:43pm

cảm ơn bạn nhé, mình cũng ko rõ sao cái scrollTop kia lại bằng 0, mặc dù focus đúng document trên w3c, để mai mình test lại xem