JavaScript - GoToTop 作法


Posted by hoyi-23 on 2021-06-16

<html>
<a href="#" class="gotop">
    <!--gotopicon-->
</a>
</html>

點擊向上滾動按鈕,執行向上滾動。

<script>
function goTop(e) {
    e.preventDefault();
    if (e.target.offsetParent.classList.value == 'gotop') {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    }
}
body.addEventListener('click', goTop);
</script>

scroll to top

$(document).ready(function () {
    $(window).scroll(function (e) {
        var scrollY = window.scrollY;
        if (scrollY < 500) {
            $('.top-btn').addClass('show');
        } else{
            $('.top-btn').removeClass('show');
        }

    $('.top-btn').click(function(){
        $('html,body').animate({
          scrollTop: 0
        },1000);
    });

});

#GoToTop







Related Posts

[筆記] TCP/IP

[筆記] TCP/IP

【Day03】CSS選擇器與優先權、Box model以及block、inline element

【Day03】CSS選擇器與優先權、Box model以及block、inline element

CSS 衍生的資安問題(下) - 我愛偷甚麼就偷甚麼

CSS 衍生的資安問題(下) - 我愛偷甚麼就偷甚麼


Comments