Question

经过一段不错的搜索时间后，我仍然没有找到这个特定功能的任何信息，但我确信它可以完成。

我正在使用的网站虽然有一个非常短的页面。我为这个单页长页创建了一个滚动到顶部按钮，没有任何问题。我希望这个按钮只适用于这个单独的页面，但当我在网站上加载另一个页面时，我得到控制台错误 - '未捕获的TypeError：无法在scrollFunction'

读取null的属性'style'

这是我试图用来检查页面的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";
    }
  }
}

非常感谢任何指导。

Answer 1

答案很简单，因为indexOf（see spec）返回第一个成立事件的索引（数字），所以您的语句将始终被视为真，否则将返回{{1} }。

您应该更新代码：

-1

Answer 2

这与Sujen K.提出的答案类似，但有一些差异可以简化代码清晰度并使性能更好一些：

＆＃13;

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

＆＃13;

Answer 3

看看这个解决方案：

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 =＆＃34;某些东西＆＃34;），然后在（href =＆＃34; #thing＆＃34;）有一个链接点。它解决了没有脚本的问题。

Answer 4

看看这个解决方案： 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>
[...]

可以帮忙吗？

如何在单个页面上创建滚动到顶部按钮？

4 个答案: