如何在單個頁面上創建滾動到頂部按鈕？

經過一段不錯的搜索時間後，我仍然沒有找到任何有關此特定功能的信息，但我確信它可以完成。如何在單個頁面上創建滾動到頂部按鈕？

我正在使用的網站有很短的頁面，儘管只有一個。我創建了一個滾動到頂部按鈕這個單一的長頁面沒有問題。 '我想要這個按鈕只爲這個人的頁面工作，但當我加載網站上的另一個頁面我得到控制檯錯誤 - '未捕獲TypeError：無法讀取屬性'風格'null在scrollFunction'

這是函數我'試圖用來檢查頁面的href：

window.onscroll = function() {scrollFunction()}; 

function scrollFunction() { 
    if (window.location.href.indexOf("portfolio.html")) { 
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 
     document.getElementById("scrollButton").style.display = "block"; 
    } else { 
     document.getElementById("scrollButton").style.display = "none"; 
    } 
    } 
}

任何指導將不勝感激。

來源

2017-03-08 DLzer

這是類似於Sujen K.提出的答案，但有一定的差異，簡化了代碼的清晰度，使事情性能好一點：

var elementExists = document.getElementById('scrollButton'); 
 
// We can skip the page URL check because in theory this 
 
// behavior is desired on any page with the scrollButton 
 
if (elementExists) { 
 
// By moving the onScroll function into the if statement 
 
// it no longer has to check on pages without scrollButton 
 
// We can also simplify how it is set up. 
 
    window.onscroll = function() { 
 
     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 
 
      // We can reuse elementExists here for a minor 
 
      // performance gain instead of having to get it again. 
 
      elementExists.style.display = "block"; 
 
     } else { 
 
      elementExists.style.display = "none"; 
 
     } 
 
    }; 
 
}

來源

2017-03-08 22:20:42

這工作，似乎更功能針對我想要實現的。請原諒我缺乏存儲scrollButton在一個變量，我仍然是半新的JavaScript，雖然它減緩了我的下降，我明白當我寫出來更好。我知道腳本正常工作後立即返回並創建變量。 – DLzer

不用擔心 - 我只是想知道我將如何做到這一點，並對每個部分進行評論。即使它對你沒有幫助，別人也可能會絆倒並發現它很有用。 –

看一看這個解決方案：

http://jsfiddle.net/neeklamy/RpPEe/

$(document).ready(function() { 

    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('.scrollup').fadeIn(); 
     } else { 
      $('.scrollup').fadeOut(); 
     } 
    }); 

    $('.scrollup').click(function() { 
     $("html, body").animate({ 
      scrollTop: 0 
     }, 600); 
     return false; 
    }); 

});

而且 - 考慮開溝JS，只是給你的身體一個ID（ID = 「東西」），則必須在一個鏈接點（ HREF = 「＃的東西」）。它根本沒有腳本解決問題。

來源

2017-03-08 22:00:12 Brdavs

答案很簡單，你的發言將被永遠視爲真實的，因爲indexOf（see spec）返回第一個創辦出現的索引（號），否則將返回-1。

你應該在方式更新代碼：

if (window.location.href.indexOf("portfolio.html") !== -1) {

來源

2017-03-08 22:00:33 jukben

謝謝。如果找不到任何事件，它會完全飛過我的頭，-1會返回。 – DLzer

看此解決方案： https://jsfiddle.net/9x204t2o/1/

JS：

$(document).ready(function(){ 
     $(window).scroll(function(){ 
      if ($(this).scrollTop() > 100) { 
        $('.scrollToTop').fadeIn(); 
      } else { 
        $('.scrollToTop').fadeOut(); 
      } 
    }); 

    $('.scrollToTop').click(function(){ 
      $('html, body').animate({scrollTop : 0},800); 
      return false; 
    }); 
});

CSS：

.scrollToTop{ 
    width: 100px; 
    height: 80px; 
    padding: 10px; 
    text-align: center; 
    background: whiteSmoke; 
    font-weight: bold; 
    color: #444; 
    text-decoration: none; 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    display: none; 
    background: url(https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-512.png) no-repeat; 
    background-size: 40px; 
    background-position: 40px 30px; 
} 
.scrollToTop:hover{ 
    text-decoration:none; 
}

HTML：

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
<a href="#" class="scrollToTop">Scroll To Top</a> 
[...]

能幫忙嗎？

來源

2017-03-08 22:11:12 Davide

如何在單個頁面上創建滾動到頂部按鈕？

回答

相關問題