我已经搜索了几个小时，但没有解决方案。我想要平滑滚动到页面顶部。我已经平滑滚动到页面中的单独锚点，.js文件附加到我的网站，但我不能在顶部使用锚点，因为我使用的是来自免费托管网站的模板，内置页面构建工具不允许我在身体区域上方进行编辑。
这是我获得平滑滚动的地方。我一直在尝试设置“smoothly-scroll-to-an-element-without-a-jquery-plugin”，但经过无数次尝试后，我不知道如何明显地安排它。我也用过，window.scrollTo(0, 0);但它会立即滚动。谢谢！
另外：
http://jsfiddle.net/WFd3V/ -代码很可能是标签class="smoothScroll"，因为我的其他元素的使用，但我不知道如何将它与混合href="javascript:window.scrollTo(0,0);"，或其他任何将带给页面没有锚的顶部。
我认为最简单的解决方案是：
window.scrollTo({top: 0, behavior: 'smooth'});
如果您想要即时滚动，则只需使用：
window.scrollTo({top: 0});
可以用作函数：
// Scroll To Top
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
或者作为一个 onclick 处理程序：
<button onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Scroll to Top</button>
这是我用 ES6 实现的建议
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
scrollToTop();
提示：对于较慢的滚动动作，请增加硬编码数字8。数字越大 - 滚动越平滑/越慢。
window.scroll({top: 0, behavior: "smooth"})
只需使用这段代码，它就会完美运行，您可以将其包装到方法或事件中。
仅纯 Javascript
var t1 = 0;
window.onscroll = scroll1;
function scroll1() {
var toTop = document.getElementById('toTop');
window.scrollY > 0 ? toTop.style.display = 'Block' : toTop.style.display = 'none';
}
function abcd() {
var y1 = window.scrollY;
y1 = y1 - 1000;
window.scrollTo(0, y1);
if (y1 > 0) {
t1 = setTimeout("abcd()", 100);
} else {
clearTimeout(t1);
}
}#toTop {
display: block;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 48px;
}
#toTop {
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
opacity: 0.5;
display: none;
cursor: pointer;
}
#toTop:hover {
opacity: 1;
}<p>your text here</p>
<img id="toTop" src="http://via.placeholder.com/50x50" onclick="abcd()" title="Go To Top">您应该开始使用 jQuery 或其他一些 js 库。它比 js 容易得多，你可以将它用作大多数 js 的简写，而不是实际上很长的、绘制出来的 js。
简单地将<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>（或任何最新的谷歌 CDN 是https://developers.google.com/speed/libraries/devguide#jquery）放在您的<head>.
然后，在您的event代码中（如果您使用 jQuery 会更容易：$.click()对于按钮、$.change()复选框、选择、单选...），将第二个链接中的代码看起来更像
$('#theIDofTheButtonThatTriggersThisAnimation').click(function(){
$('#theIDofTheElementYouWantToSmoothlyScroll').animate({
scrollTop: 0
}, 2000);
});
但是，如果您正在尝试制作动画，我建议您查看一些基本的 css 属性，例如position:absolute并position:relative避免发疯。
我仍然不太确定您的代码中发生了什么，因为相对于现在使用 css 和 jQuery 的处理方式而言，它非常不标准。我会把它分解成一些简单的东西来学习一般概念。
对于您的示例，您应该基于我的动画示例，我是如何学习的：https : //stackoverflow.com/a/12906254/1382306
我认为您正在尝试根据$.click(). 在我的答案中的小提琴中，它向左和向右滑动。您可以使用 csstop属性而不是left.
一旦你弄清楚如何上下移动整个div，你就可以制作一个relative容器来容纳所有的内容absolute divs 并div通过设置它们的tops 来循环操作所有内容s。这里有一个快速入门absolute中relative：http://css-tricks.com/absolute-positioning-inside-relative-positioning/
我所有的动画都有relative容器和absolute内容。这就是我制作自定义 gridview 插件的方式，该插件可以立即压缩整个数据库。
此外，在div动画方面确实没有过度使用s 。试图让 1div做所有事情是一场噩梦。
试试看你能不能把我的小提琴重新格式化成垂直滑出。一旦你做到这一点，研究absolute在relative一点点。如果您有更多问题，请再问一个问题。
将您的想法转变为这些哲学，您将开始快速浏览此类编码。