0

这是我已经得到的代码：

$(document).ready(function()
{
    /*Scrolls to whichever element is clicked if is has .scrollPage class */
    $('.scrollPage').click(function() {
        var elementClicked = $(this).attr("href");
        var destination = $(elementClicked).offset().top;
        $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-0}, 500 );
        return false;
    });

    $('#backToTop').hide();
    $('#sideNav').hide();

    var headerHeight = $('#header').height();   

    /* Detect when page is scrolled */
    $(document).scroll(function(){ 
        var scrolledpx = parseInt($(document).scrollTop()); 
        if (scrolledpx > headerHeight) {
            $("#backToTop").fadeIn(500);
            $("#sideNav").fadeIn(500);
        }
        else if (scrolledpx < headerHeight) {
            $("#backToTop").fadeOut(500);
            $("#sideNav").fadeOut(500);         
        }
    });


});

#backToTop 对应的 HTML 是：

<div id="backToTop">
Top
</div>

和CSS：

.backToTop {
position: fixed;
top: 10px;
left: 10px;
}

问题是当我在标题下方滚动时#backToTop 不显示，但是当我单击链接滚动到特定部分时（效果很好），它似乎为#backToTop 留下了空间（即它只是移动页向下一行），但不显示。我究竟做错了什么？

4

2 回答 2

0

对不起，很简单。我在 CSS 中使用 .backToTop 而不是 #backToTop。

于 2013-03-13T16:28:52.270 回答
0

看到这个小提琴：http: //jsfiddle.net/Fcden/

你的CSS应该是：

#backToTop {
position: fixed;
top: 10px;
left: 10px;
}

因为backToTop是id（不是class）分配给 div，

于 2013-03-13T16:29:18.823 回答