我已经搜索了几个小时了，但还是没有找到解决方案。我希望页面能够平稳滚动到顶部。我已经使用一个附加到我的网站的 .js 文件，实现了在页面上独立锚点处的平滑滚动，但是我无法使用一个锚点来实现回到页面顶部，因为我使用的是一个免费托管站点提供的模板，内置页建设工具不允许我进行在 body 区域之上的编辑。
这里 是我找到平稳滚动效果的地方。我一直在尝试设置“平稳滚动至没有 jQuery 插件的元素”，但是明显排列无从下手，尝试次数无数次。我也试过 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>
$('html, body').animate({scrollTop:0},'50'); - Ivica PesovskiscrollTo只需要一个参数，可以是数字或对象。如果您选择传递对象，则可以指定behavior。这个解决方案在Chrome / Electron上对我很有效。 - Martin Braun这是用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。数字越大，则滚动越平稳/缓慢。
const smoothness = 8;
let val = s - s / smoothness;
if (val < smoothness) val = 0;
window.scrollTo(0, val);问题已经解决，但是由于val=0;，它有一点跳动效果。 - fatihsolhanscroll-behavior: smooth冲突，必须在脚本执行期间禁用CSS规则。 - Olivier Cwindow.scrollTo({ top: 0, behavior: 'smooth' }) 并添加 smoothscroll-polyfill @AkankshaMohanty - fatihsolhanwindow.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">这个问题已经过去了一段时间。
现在不仅可以在window.scroll函数中指定数字，还可以传递一个具有三个属性的对象：top、left和behavior。因此，如果我们想要使用原生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
嗯，评论功能对我来说无法开启，
请尝试这样做。
$(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>您应该开始使用jQuery或其他JavaScript库。它比JavaScript更容易，而且您可以将其用作大多数JavaScript的速记，而不是使用实际的冗长JavaScript。
简单地说，在您的<head>中放置<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>（或任何最新的Google CDN：https://developers.google.com/speed/libraries/devguide#jquery）。
然后，在您的event代码内（如果您使用jQuery，则更容易：对于按钮，请使用$.click()，对于复选框、选择器、收音机，请使用$.change()），将来自第二个链接的代码放置得更像：
$('#theIDofTheButtonThatTriggersThisAnimation').click(function(){
$('#theIDofTheElementYouWantToSmoothlyScroll').animate({
scrollTop: 0
}, 2000);
});
position:absolute和position:relative，以避免让自己发疯。
$.click()上下移动文本。在我的答案中，它向左右滑动。你可以通过使用CSS的top属性而不是left轻松改变其上下格式。relative容器来容纳所有内容absolute div，并通过设置它们的top循环操作所有内容div。这里有一个关于absolute和relative的快速入门指南：
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
我所有的动画都有relative容器和absolute内容。这是我制作自定义网格视图插件的方式，它可以立即浏览整个数据库。absolute和relative。如果你有任何问题，请再问一个问题。$("body").animate({scrollTop:0}); 就可以了。 - peirix<a name>标签将我的页面链接到单独的锚点，视图会平滑滚动到该锚点，而我用来解决无法编码到页面顶部的问题的代码是相对像素重定位器：<a name="home" style="position:relative; top:-524px;">。也许这不是我最初的目标，但我想它比完美更好。祝大家好运，谢谢。 - user2267388您可以简单地使用
// 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>使用jQuery的优雅简单解决方案。
<script>
function call() {
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
});
}
</script>
<div onclick="call()"><img src="../img/arrow-up@2x.png"></div>
这个代码片段表示一个带有箭头图标的div元素，并在点击时调用名为“call()”函数。如果您想了解更全面的平滑滚动方法列表，请查看我的答案这里。
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库也可以使用，它处理更复杂的情况，例如平滑地垂直和水平滚动，在其他容器元素内滚动，不同的缓动行为，相对于当前位置滚动等等。
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 从当前位置滚动一定量：
// 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属性, 可以用于使文档中的滚动平滑（无需使用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>