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

经过一段不错的搜索时间后，我仍然没有找到任何有关此特定功能的信息，但我确信它可以完成。如何在单个页面上创建滚动到顶部按钮？

我正在使用的网站有很短的页面，尽管只有一个。我创建了一个滚动到顶部按钮这个单一的长页面没有问题。 '我想要这个按钮只为这个人的页面工作，但当我加载网站上的另一个页面我得到控制台错误 - '未捕获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

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

回答

相关问题