滚动到底部后如何在页脚上方设置“返回顶部”

Question

I use the code given below for my back to top option

          $(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);
});

but it does not work while i scroll down, because my content has the position relative as well as i have a floting div which position is absolute.In above code i need to set the position of my content is absolute.If i do this the two content displace. here is my html code:

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

how can i fixed this problem..

Answer 1

if you don't want to animate anything, then window.scrollTo(0,0) will do. (x coord, y coord).

If you want to animate it, then this will do: $('body').animate({scrollTop:0},2000);

no need to create old html hash-anchors ( www.domain.com/index.html#paragraph2 ), jQuery does the trick :)

Answer 2

This is now correct and it works....

     $(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);
});