重新定位出現頁腳時滾動到頂部按鈕

Question

一旦站點用戶向下滾動足夠遠以使頁腳出現在屏幕上，就必須有一種方法使我的“滾動到頂部”按鈕處理#footer容器的頂部，對嗎？ 現在它只想固定在屏幕的左下角-這很有意義，但是必須有一種方法可以做我想做的事情，作為一個新手，我似乎無法弄清楚！ 任何幫助將非常感激。 謝謝！

我網站上我們使用按鈕的頁面： http : //joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout

這是我的腳本：

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

});

和相關的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;
}

和html：

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

Answer 1

您的目標是使“滾動到頂部”按鈕位於頁腳頂部時是否可單擊？ 因為您要做的就是將按鈕的z-index（CSS屬性）設置為100或更高，因此將其置於頁腳頂部。
如果您想將其移動到頁腳上方，我相信您可以在$（window）.scroll（）中放置第二個條件，以檢查scrollTop（）是否在頁面末尾附近（通過將其與$（document）比較）。 height（）），然后將按鈕的“底部”值設置為更高的值（例如，使用$ back_to_top.css（“ bottom”，“ 200”））。

Answer 2

好吧，我想通了！ 這是我做的，以防萬一有人遇到類似的問題。 我在$（window）.scroll（function（）下添加了以下2條if語句：

    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"); //
 }

簽出-現在可以完全按照我的意願運行了！ http://joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout