重新定位出现页脚时滚动到顶部按钮

Question

There has to be a way to get my scroll to top button to treat the top of the #footer container as soon as a site user has scrolled down far enough so that the footer appears on screen, right? Right now it wants to just stay fixed in the lower left corner of the screen - which makes sense but there has to be a way to do what I'd like and as a novice I just can't seem to figure it out! Any help would be much appreciated. Thanks!

A page on my site where the button us used: http://joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout

Here is my script:

jQuery(document).ready(function($){
    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 300,
        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
        offset_opacity = 1200,
        //duration of the top scrolling animation (in ms)
        scroll_top_duration = 700,
        //grab the "back to top" link
        $back_to_top = $('.cd-top');

    //hide or show the "back to top" link
    $(window).scroll(function(){
        ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if( $(this).scrollTop() > offset_opacity ) { 
            $back_to_top.addClass('cd-fade-out');
        }
    });

    //smooth scroll to top
    $back_to_top.on('click', function(event){
        event.preventDefault();
        $('body,html').animate({
            scrollTop: 0 ,
            }, scroll_top_duration
        );
    });

});

And relevant css:

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: none;
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url('litebox-next.png') no-repeat center 50%;
  background-size: 40px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .335;
}

.cd-top:hover {
  background-color: transparent;
  opacity: 1!important;
}

And the html:

<a href="#0" class="cd-top">Top</a>

Answer 1

Is your goal to have the "scroll to top" button clickable when it's on top of the footer? Because all you have to do for that is set the button's z-index (a CSS property) to 100 or higher, to have it on top of the footer.
If you want to move it above the footer, I believe you can put a second conditional in $(window).scroll() that checks if scrollTop() is near the end of the page (by comparing it to $(document).height() ), and then set the button's "bottom" value to something higher (eg with $back_to_top.css("bottom", "200") ).

Answer 2

Well I figured it out! Here is what I did just in case anyone should ever encounter a similar issue. I added the following 2 if statements under $(window).scroll(function() :

    if($(window).scrollTop() + $(window).height() < $(document).height() - $("#footer").height()) {
        $('.cd-top').css("position","fixed");    //resetting it
        $('.cd-top').css("bottom","40px"); //resetting it
}


    if($(window).scrollTop() + $(window).height() > $(document).height() - $("#footer").height()) {
        $('.cd-top').css("position","relative"); // make it related
        $('.cd-top').css("bottom","0"); //
 }

Check it out - it now works exactly as I wanted it to! http://joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout