javascript - jQuery:在 div 中平滑滚动 "back to top"？

Question

我知道 Stack Overflow 上有大量 jQuery“回到顶部”的问题，但我还没有找到可以解决这个问题的解决方案:

我在 div 中有一个高度可变的列表(随着我逐渐更新网站，列表会变得更长)。所以我想使用“回到顶部”按钮将 div 滚动到顶部。我遇到的大多数“返回顶部”脚本控制 body 标签的滚动，而不是 div。

我已经尝试了几种在该网站上找到的不同方法，但我完全被难住了。附件是我的代码的 JSFiddle，它控制主体而不是 div。

附言。我正在使用 webkit 滚动条在 div 上显示滚动。

提前致谢:-)

$(window).scroll(function() {
  if ($(this).scrollTop()) {
    $('#toTop').fadeIn();
  } else {
    $('#toTop').fadeOut();
  }
});

$("#toTop").click(function() {
  $("html, body").animate({
    scrollTop: 0
  }, 1000);
});

* {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}
.menu {
  overflow-y: scroll;
  width: 150px;
  text-align: left;
  height: 478px;
}
#toTop {
  bottom: 0;
  display: none;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 0, 0, 0.05);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu">
  Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item

</div>
<br>
<br>
<div id='toTop'>Back to top.</div>

Answer 1

只需将您的元素放在 scrolltop 脚本中而不是 html,body

$("#toTop").click(function() {
  $("#myscrollingelement").animate({
    scrollTop: 0
  }, 1000);
});

这是与您的示例代码相关的:

$(window).scroll(function() {
  /* irrelevant to question
  if ($(this).scrollTop()) {
    $('#toTop').fadeIn();
  } else {
    $('#toTop').fadeOut();
  }
  */
});

$('#toTop').fadeIn()
.click(function() {
  $(".menu").animate({
    scrollTop: 0
  }, 1000);
  /* if you want the body to scroll to the top AS WELL
  $('html,body').animate({
    scrollTop: 0
  }, 1000);
  */
});

* {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}
.menu {
  overflow-y: scroll;
  width: 150px;
  text-align: left;
  height: 478px;
}
#toTop {
  bottom: 0;
  display: none;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 0, 0, 0.05);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu">
  Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item
  <br/>
  <br/>
  <br/>
  <br/>Menu item

</div>
<br>
<br>
<div id='toTop'>Back to top.</div>