191问答库 > jquery如何实现当页面下拉到一定位置时，右下角出现回到顶部图标

jquery如何实现当页面下拉到一定位置时，右下角出现回到顶部图标

这个该写在什么事件里呢？怎么判断页面位置呢？

2025-02-25 22:29:29

推荐回答（3个）

回答1：

重写window.onscroll()事件，先将返回顶部div设置为position:fixed;right:10px;bottom:10px;display:none，一旦event.scrollTop>100(100可以设置为你想要的值)就display:block（fadeIn()），否则display:none(fadeOut())。还要设置返回顶部div点击事件，onclick(function(){$('body,html').animate({scrollTop:0},1000);})，这个什么意思不用我多说吧，既然搞Jquery，动画还是应该晓得。


    #gotop{position:fixed;right:10px;bottom:10px;display:none}


    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop > 100){
                $("#gotop").fadeIn(1000);//一秒渐入动画
            }else{
                $("#gotop").fadeOut(1000);//一秒渐隐动画
            }
        });
        
        $("#gotop").click(function(){
            $('body,html').animate({scrollTop:0},1000);
        });
    });

刚写的，没测试，有问题再问我。

回答2：

这个用js来实现
$(function () {
showScroll();
function showScroll() {
$(window).scroll(function () {
var scrollValue = $(window).scrollTop();
scrollValue > 100 ? $('div[class=scroll]').fadeIn() : $('div[class=scroll]').fadeOut();
});
$('#scroll').click(function () {
$("html,body").animate({ scrollTop: 0 }, 200);
});
}
});
当距离顶部100时，显示返回顶部div

回答3：

    
    
        $(function () {    
            $(window).scroll(function () {    
                if ($(window).scrollTop() > 103) {     
                    $('#top').css('display','block');    //

假如有这么个div是那个向上图标的div。css默认none
                    }
            else {
                $('#top').css('display','none');
            }
        });
    });