'Back to top' on scroll top at footer

Question

Using some examples I've seen around I've got a back to the top button to appear and work when you scroll down a page, however is there a way of making the button stick to the bottom of the screen until you reach the footer where it will stick to the top of the footer?

this is my code so far:

<script type="text/javascript" defer="defer">
    $(window).scroll(function() {
        if ($(this).scrollTop()) {
            $("#toTop").fadeIn();
        } else {
            $("#toTop").fadeOut();
        }
    });


    $("#toTop").click(function() {
        $("html, body").animate({scrollTop: 0}, 1000);
    });
</script>

<style type="text/css">
    .backtotop_button_wrap {width:100%; background:white; height:auto;}
    .backtotop_button_height {width:100%; height:55px;}
    #toTop {display:none; position: fixed; right:0; bottom:0; width:100px; height:auto; background:white; float:right; padding:10px; text-align:center; border:1px solid black; line-height:12px;}
    #footer {width:100%; height:500px; color:white; text-align:center; background:#313131; border-top:1px solid black;}
</style>

<div class="backtotop_button_wrap">
    <div class="backtotop_button_height">
        <div id="toTop">^<br />Back to the Top</div>
    </div>
</div>
<div id="footer">
Footer
</div>

I've also made a Jfiddle here: http://jsfiddle.net/0Lge6wqq/

Do you mean for it to stop at the footer? or too see the back to top box? because in the jfiddle if you scroll down the preview plane it should dislay the box along the bottom, which is what I want it to do but then to stop scrolling at the start of the footer. — Chobbit, Jan 05 '15 at 13:18

score 8 · Accepted Answer · edited Mar 24 '16 at 12:31

8

Change the html position of #toTop into the #footer. When the window reaches the height of the footer. #toTop changes from being fixed to being relative.

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

jsfiddle

http://jsfiddle.net/0Lge6wqq/4/

edited Mar 24 '16 at 12:31

Moyed Ansari

8,316
2
35
55

answered Jan 05 '15 at 13:32

Christian Unverricht

96
3

2

It's working fine, but it would be better to toggle classes instead of toggling styles. – Jonathan Parent Lévesque Apr 17 '18 at 14:42

'Back to top' on scroll top at footer

1 Answers1

Linked