Question

我正在使用此处描述的折叠标题http://codepen.io/cbracco/pen/corFl

我想通过以下功能进行增强：当用户在标题上滚动内容区域时，我希望显示＆＃34;重置＆＃34;按钮，将内容区域推回到其初始位置，并再次完全显示标题。

我想至少在重置时，我必须使用javascript（或许可以使用CSS复选功能？）。可以＆＃34;重置＆＃34;按钮纯粹通过使用CSS显示，或者我必须使用window.onScroll来检测内容区域的滚动并通过javascript自己显示按钮？

Answer 1

您可以在页面顶部创建一个id为的元素（即<span id="top">），然后使用Javascript滚动到该元素。

button.addEventListener('click', function() {
    window.location.hash = "#top";
});

请参阅this SO问题。

Answer 2

滚动到顶部可以轻松完成，无需javascript：

<div id="top">lorem ipsum</a>
<a href="#top">go to top</a>

http://codepen.io/anon/pen/PZBXyg

如果你想顺利滚动到顶部，那么我建议使用这个整齐的jquery小片段：

$('#top').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    history.pushState({}, '', target.selector);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});

http://codepen.io/anon/pen/xZJmyP

要根据用户滚动的数量显示“重置”按钮，您可能需要使用window.onscroll侦听器，然后检查scrollTop值使用原生javascript：

window.onscroll = function(){
    console.log(document.body.scrollTop)
}

使用jQuery

$(window).scroll(function (event) {
    console.log($(window).scrollTop());
});

显示重置/显示按钮以折叠标题

2 个答案: