JS 回到顶端 back to top

Posted 笑逗逗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 回到顶端 back to top相关的知识,希望对你有一定的参考价值。

CSS:
.backtoTop2{
    height: 40px;
    width: 50px;
    position: fixed;     
    padding-top: 8px;
    right: 100px;
    z-index: 9999;
    background: red;
    cursor: pointer;
    text-align: center;
}

JS:
$(document).ready(function(){
    $(window).scroll( function() {                    // change scroll event
        var height = $(window).height(),          //get window height
              top = $(document).scrollTop();       //get scroll top
        if(top > height ){                                    //more than height to show
            $("#backToTop2").fadeIn(300).css({
                top: height-80
            });
        }
        if(top < height ){                                   //less than height to disappear
            $("#backToTop2").fadeOut(200);
        }
    });
    /*back to top click*/
    $(‘#backToTop2‘).click(function(){
        $(‘html, body‘).animate({                     // Animation effects --> move
            scrollTop: 0
        }, 500);
    });
});
  
HTML:
<divid="backToTop2"class="backtoTop2"></div>

  

以上是关于JS 回到顶端 back to top的主要内容,如果未能解决你的问题,请参考以下文章

js和jquery实现回到顶层

点击网页底部的top按钮直接回到网页顶部,怎么做?用js怎么表达

Back To Top

如何从 Material UI 为我的应用中的 React 添加带有 Back to Top 按钮的 AppBar?

css Genesis的简单而流畅的Back-To-Top按钮

JS实现回到Top(顶部)--JavaScript