JSFiddle - React, Tailwind, and code Playground

by tuanitpro

HTML

<div id="toBottom">To Bottom</div>
<div id="toDiv">To Div - Click vào đây để đi đến ngắm Ngọc Trinh

    <div style="height:500px">
<a href="http://tuanitpro.com">Blog chia sẻ kiến thức Lập trình - http://tuanitpro.com</a>
    <br>
        Đoạn code cho phép click vào một eleement và scroll đến elment khác

da
d
a
d
a
da
d
a
d
a
d
a
d
a
d
a
d
a
d
a
d
ad
ad
</div>
<div style="height:500px" id="myID">
    To DIV <a href="http://tuanitpro.com">Blog chia sẻ kiến thức Lập trình - http://tuanitpro.com</a>
</div>
<div class="scroll-to-top" id="toTop">dadadad</div>

CSS

.scroll-to-top {
    background: none repeat scroll 0 0 rgba(100, 100, 100, 0.4);
    border-radius: 4px;
    bottom: 4%;
    color: #fff;
    cursor: pointer;
     
    font-size: 20px;
    line-height: 40px;
    position: fixed;
    right: 20px;
    text-align: center;
    transition: background-color 0.3s linear 0s;
    width: 40px;
    z-index: 999;
}

JavaScript

$(document).ready(function(){
 
$('#toTop').click(function () {
                    $('body,html').animate({ scrollTop: 0 }, 800);
                });
    $('#toBottom').click(function () {
                    $("html, body").animate({ scrollTop: $(document).height() }, 1000);
                });
    
    $('#toDiv').click(function () {
                  
         $('html,body').animate({
        scrollTop: $("#myID").offset().top - 30},
        800);
        
                });
    
});