Jquery滚动顶部元素不移动

时间:2013-03-26 03:27:49

标签: jquery html css

在页面的实际实现中,链接随页面一起移动但未在页面中显示(可见)。当我在浏览器中单击css时,元素将出现在滚动位置。


        //elemet to appear when scrolling
         <a href="#" class="scrollup">Scroll</a>

    $(document).ready(function(){ 

        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        }); 

        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });

    });

    //css for the element
        .scrollup{
                    width:40px;
                    height:40px;
                    opacity:0.3;
                    position:fixed;
                    bottom:50px;
                    right:100px;
                            display:none;   
            }

不使用chrome。在firefox工作。

2 个答案:

答案 0 :(得分:0)

尝试:

$('.scrollup').click(function(){
    $( 'html, body' ).animate( { scrollTop: $('body').offset().top }, 'slow' );                                     return false;   
});

或者

$('.scrollup').click(function(){
    $('body').scrollTop($('body')
});

答案 1 :(得分:0)

这就是你想要的

JS

$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('.scrollup').fadeIn();
    } else {
        $('.scrollup').fadeOut();
    }
});

$(".scrollup").click(function () {
   //1 second of animation time
   //html works for FFX but not Chrome
   //body works for Chrome but not FFX
   //This strange selector seems to work universally
   $("html, body").animate({scrollTop: 0}, 1000);
});

HTML

<a href="#" class="scrollup">Scroll</a>

css

.scrollup{
    padding: 5px 3px;
    background: #000;
    color: #fff;
    position: fixed;
    bottom: 0;
    right: 5px;
    display: none;
            }

工作demo

希望这有助于你