jQuery：在div中平滑滚动“回到顶部”？

Question

我知道Stack Overflow上有大量关于jQuery“回到顶部”的问题，但我没有找到适用于此问题的解决方案：

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

我尝试了一些我在这个网站上找到的不同方法，但我完全被难倒了。附件是我的代码的JSFiddle，它控制正文而不是div。

PS。我正在使用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);
});

以下是与您的示例代码相关的内容：

＆＃13;

＆＃13;

$(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);
  */
});

＆＃13;

* {
  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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;