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

[新手村系列] Github 帳號申請教學

[新手村系列] Github 帳號申請教學

JavaScript 程式執行原理:Scope Chain 與 var, let, const

JavaScript 程式執行原理:Scope Chain 與 var, let, const

給自己看的 JS 進階-變數

給自己看的 JS 進階-變數


Comments