Question

我使用下面给出的代码作为我的返回顶部选项

          $(window).scroll(function() {
if ($(this).scrollTop()) {
    $("#to-top").fadeIn();
} else {
    $("#to-top").fadeOut();
}
  if($(window).scrollTop() + $(window).height() < $(document).height() - $("#footer").height()) {
    $('#to-top').css("position","fixed");    //resetting it
    $('#to-top').css("bottom","0"); //resetting it
}
    if($(window).scrollTop() + $(window).height() > $(document).height() - $("#footer").height()) {
    $('#to-top').css("position","relative"); // make it related
    $('#to-top').css("bottom","188px"); // 60 px, height of #toTop
}

});


$("#to-top").click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
});

但是当我向下滚动时它不起作用，因为我的内容有相对的位置以及我有一个浮动div这个位置是绝对的。在上面的代码我需要设置我的内容的位置是绝对的。如果我做到这两个内容取代了。这是我的HTML代码：

<a id="to-top" style="position:fixed;bottom:0px;right:15px;" href="#" title="Back to Top"><img src="../images/BackToTop_icon.jpg"/></a>

我该如何解决这个问题..

Answer 1

如果您不想动画任何内容，那么window.scrollTo(0,0)就可以了。（x coord，y coord）。

如果你想为它设置动画，那么这样做： $('body').animate({scrollTop:0},2000);

无需创建旧的html hash-anchors（www.domain.com/index.html#paragraph2），jQuery可以解决这个问题：）

Answer 2

现在这是正确的，它有效......

     $(document).ready(function() {
     $("#to-top").css("display","none");
      });

   $(window).scroll(function() {
    if ($(this).scrollTop()) {
        $("#to-top").fadeIn();
    } else {
        $("#to-top").fadeOut();
    }
      if($(window).scrollTop() + $(window).height() < $(document).height() - $("#sc-main-footer").height()) {
        $('#to-top').css("position","fixed");    //resetting it
        $('#to-top').css("bottom","0"); //resetting it
    }
        if($(window).scrollTop() + $(window).height() > $(document).height() - $("#sc-main-footer").height()) {
        $('#to-top').css("bottom","188px");

    }

});


$("#to-top").click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
});

如何设置＆＃39;回到顶部＆＃39;滚动到底部之后的页脚

2 个答案: