页脚顶部的“返回顶部" [英] 'Back to top' on scroll top at footer

问题描述

使用我周围看到的一些示例，当您向下滚动页面时，会出现返回顶部按钮，并且可以正常工作，但是有一种方法可以使按钮固定在屏幕底部，直到到达页脚，该页脚将停留在页脚的顶部?

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>

我还在这里做了一个Jfiddle: http://jsfiddle.net/0Lge6wqq/

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

推荐答案

将#toTop的html位置更改为#footer. 当窗口达到页脚的高度时. #toTop从固定变为相对.

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/

这篇关于页脚顶部的“返回顶部"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！