text 滚动到顶部使用动画功能

Posted 2021-05-02

.scrollToTop{
    width:70px;
    height: 70px;
    background-image: url('../images/scrolltop.png');
    background-repeat: no-repeat;
    background-size: 55px 55px;
    position:fixed;
    margin: auto;
    bottom:30px;
    display:none;
    z-index: 100000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-center"><a href="#" class="scrollToTop"></a></div>
<script>
$(document).ready(function(){
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});
</script>