我已经在几个小时内搜索了这个，我没有解决方案。我想要一个平滑的滚动到页面顶部。我已经有了平滑的滚动来分隔页面中的锚点，其中.js文件附加到我的网站，但我不能使用锚点作为顶部，因为我使用的是内置页面构建的免费托管站点的模板不允许我在身体区域上方编辑的工具。
Here我得到了平滑滚动的地方。我一直在尝试设置“平滑滚动到元素 - 没有jquery插件”但我不知道如何在无数次尝试之后安排它。我也使用过window.scrollTo(0, 0);但它会立即滚动。谢谢！
另外：
http://jsfiddle.net/WFd3V/ - 代码可能是标记class="smoothScroll"，因为我的其他元素使用了该标记，但我不知道如何将其与href="javascript:window.scrollTo(0,0);"混合，或者其他任何会导致页面到顶部没有锚。
答案 0 :(得分：30)
以下是我使用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。数字越大 - 滚动越平滑/越慢。
答案 1 :(得分：8)
你应该开始使用jQuery或其他一些js lib。它比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＆amp;的事情，它是非常不标准的。 jQuery的。我将其分解为一些简单易懂的概念。
对于您的示例，您应该构建我的动画示例，我是如何学习的：https://stackoverflow.com/a/12906254/1382306
我认为您正试图根据$.click()来上下移动文字。在我的回答中，它左右滑动。您可以使用css top属性而不是left轻松地重新格式化。
一旦你弄清楚如何向上和向下移动整个div，你就可以建立一个relative容器来容纳所有内容absolute div并进行操作通过设置div来循环显示所有内容top。以下是absolute relative中relative的快速入门：http://css-tricks.com/absolute-positioning-inside-relative-positioning/
我的所有动画都有absolute个容器和div个内容。这就是我制作一个可以立即压缩整个数据库的自定义gridview插件的方法。
此外，在制作动画时，确实没有过度使用div。试图让1 absolute做一切都是一场噩梦。
尝试看看你是否可以将我的小提琴重新格式化为垂直幻灯片。完成后，请稍微研究relative中的{{1}}。如果您还有其他问题，请提出另一个问题。
将你的思想转变为这些哲学，你将开始通过这种类型的编码。
答案 2 :(得分：7)
仅限纯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">
答案 3 :(得分：5)
对我来说，co fun功能，
试试这个
$(document).ready(function(){
$("#top").hide();
$(function toTop() {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#top').fadeIn();
} else {
$('#top').fadeOut();
}
});
$('#top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});#top {
float:right;
width:39px;
margin-top:-35px;
}
#top {
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;
}
#top:hover {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="top" onclick="toTop()"><img src="to_top.png" alt="no pic "/> klick to top</div>
答案 4 :(得分：5)
我认为最简单的解决方案是：
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>
答案 5 :(得分：3)
您只需使用
即可
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("gotoTop").style.display = "block";
} else {
document.getElementById("gotoTop").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
$('html, body').animate({scrollTop:0}, 'slow');
}body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#gotoTop {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#gotoTop:hover {
background-color: #555;
}<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<button onclick="topFunction()" id="gotoTop" title="Go to top">Top</button>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>
答案 6 :(得分：3)
window.scroll({top: 0, behavior: "smooth"})
只需使用这段代码，它就会完美工作，您可以将其包装到方法或事件中。
答案 7 :(得分：2)
我刚刚定制了BootPc Deutschland的回答
您只需使用
即可<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('body,html').animate({
scrollTop: 0
}, 800);
$('#btn-go-to-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>
这将帮助您顺利滚动到页面顶部。
和造型
#btn-go-to-top {
opacity: .5;
width:4%;
height:8%;
display: none;
position: fixed;
bottom: 5%;
right: 3%;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 10px;
border-radius: 50%;
}
#btn-go-to-top:hover {
opacity: 1;
}
.top {
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;
}
这种样式使按钮到达页面的右下角。
在您的页面中，您可以添加按钮以便像这样进入顶部
<div id="btn-go-to-top" class="text-center top">
<img src="uploads/Arrow.png" style="margin: 7px;" width="50%" height="50%">
</div>
希望这对你有所帮助。如果你有任何疑问，你总是可以自由地问我
答案 8 :(得分：2)
自从被问到以来已经过去了一段时间。
现在，不仅可以为window.scroll函数指定数字，还可以传递具有三个属性的对象：顶部，左侧和行为。因此，如果我们希望使用本机JavaScript进行平滑滚动，则可以执行以下操作：
let button = document.querySelector('button-id');
let options = {top: 0, left: 0, behavior: 'smooth'}; // left and top are coordinates
button.addEventListener('click', () => { window.scroll(options) });
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
答案 9 :(得分：0)
也在以下使用：
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
答案 10 :(得分：0)
使用jQuery的简单易行的解决方案。
var position = 0;
var index = 0;
var imageArray = [];
//...
for (index; index < image.length; index++) {
const allImagesWidth = image[index].naturalWidth,
allImagesHeight = image[index].naturalHeight;
const aspectRatio = allImagesWidth / allImagesHeight;
var adjustedHeight = slideWidth / aspectRatio;
imageArray.push(adjustedHeight++);
}
images.style.height = imageArray[position] + 'px';
function slideRight() {
position--;
images.style.height = imageArray[position] + 'px';
if (position == -1) {
position = imageCount - 1;
}
images.style.transform = 'translateX(' + -(slideWidth * position) + 'px)';
}
// ...
document.querySelector('.slide-right').addEventListener('click', slideRight, false);
，并在您的html中：
<script>
function call() {
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
});
}
</script>
答案 11 :(得分：0)
提出以下解决方案：
function scrollToTop() {
let currentOffset = window.pageYOffset;
const arr = [];
for (let i = 100; i >= 0; i--) {
arr.push(new Promise(res => {
setTimeout(() => {
res(currentOffset * (i / 100));
},
2 * (100 - i))
})
);
}
arr.reduce((acc, curr, index, arr) => {
return acc.then((res) => {
if (typeof res === 'number')
window.scrollTo(0, res)
return curr
})
}, Promise.resolve(currentOffset)).then(() => {
window.scrollTo(0, 0)
})}
答案 12 :(得分：0)
theMaxx 答案适用于 nuxt/vue，平滑滚动是默认行为
<块引用> methods: {
scrollToTop() {
window.scrollTo({ top: 0 });
}
}
答案 13 :(得分：0)
要获得更全面的平滑滚动方法列表，请参阅我的回答 here。
要在精确的时间内滚动到某个位置，可以使用 window.requestAnimationFrame，每次计算适当的当前位置。当不支持 requestAnimationFrame 时，可以使用 setTimeout 达到类似的效果。要滚动到页面顶部，可以调用以下函数，位置为 0。
/*
@param pos: the y-position to scroll to (in pixels)
@param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}
function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}
window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
scrollToSmoothly(0, 700);
});<button style="margin: 2000px 0;">Smooth scroll to top</button>也可以使用 SmoothScroll.js library，它可以处理更复杂的情况，例如垂直和水平平滑滚动、在其他容器元素内部滚动、不同的缓动行为、从当前位置相对滚动等等。
>smoothScroll({yPos: 'start', duration: 700});
// or
smoothScroll({yPos: 0, duration: 700});
window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
smoothScroll({yPos: 'start', duration: 700});
});<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button style="margin: 2000px 0;">Smooth scroll to top</button>或者，您可以将行为设置为平滑的选项对象传递给 window.scroll，它会滚动到特定的 x 和 y 位置，或者 window.scrollBy 从当前位置滚动一定量：< /p>
// Scroll to specific values
// scrollTo is the same
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 100, // could be negative value
left: 0,
behavior: 'smooth'
});
window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
window.scroll({top: 0, left: 0, behavior: 'smooth'});
});<button style="margin: 2000px 0;">Smooth scroll to top</button>现代浏览器支持 scroll-behavior CSS property，可用于使文档滚动顺畅（无需 JavaScript）。
window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
window.scrollTo(0, 0);
});html, body {
scroll-behavior: smooth;
}<button style="margin: 2000px 0;">Scroll to top (JavaScript)</button>
<a href="#">Link to smoothly scroll to top of page (no JavaScript)</a>