顺畅滚动到顶部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了顺畅滚动到顶部相关的知识，希望对你有一定的参考价值。
我现在几个小时都在寻找这个，我没有解决方案。我想要一个平滑的滚动到页面顶部。我已经有了平滑的滚动来分隔页面中的锚点，其中一个.js文件附加到我的网站，但我不能使用锚点作为顶部，因为我使用的是一个免费托管网站的模板，内置的页面构建工具没有允许我在身体区域上方进行编辑。
Here是我顺利滚动的地方。我一直在尝试设置“平滑滚动到元素 - 没有jquery插件”但我不知道如何在无数次尝试之后安排它。我也使用过window.scrollTo(0, 0);，但它会立即滚动。谢谢！
另外：http://jsfiddle.net/WFd3V/ - 代码可能是标签class="smoothScroll"，因为我的其他元素使用它，但我不知道如何将它与href="javascript:window.scrollTo(0,0);"混合，或任何其他会使页面没有锚点的顶部。
以下是我使用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。数字越大 - 滚动越平滑/越慢。
你应该开始使用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和jQuery完成的事情，它是非常不标准的。我将其分解为简单易学的一般概念。
对于你的例子，你应该建立我的动画示例，我是如何学习的：https://stackoverflow.com/a/12906254/1382306
我认为你试图根据$.click()上下移动文本。在我的回答中，它左右滑动。您可以使用css top属性而不是left轻松地重新格式化。
一旦你弄清楚如何上下移动整个div，你可以制作一个relative容器来保存所有内容absolute divs并通过设置他们的divs操纵所有内容tops。这里是关于absolute中relative的快速入门：http://css-tricks.com/absolute-positioning-inside-relative-positioning/
我的所有动画都有relative容器和absolute内容。这就是我如何创建一个可以立即压缩整个数据库的自定义gridview插件。
此外，在制作动画时，确实没有过度使用divs。试图让1个div做一切都是一场噩梦。
试着看看你是否可以将我的小提琴重新格式化为垂直幻灯片。一旦你完成了这个，就在absolute研究一下relative。如果您还有其他问题，请提出另一个问题。
将你的思想转变为这些哲学，你将开始通过这种类型的编码。
仅限纯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">嗯评论功能对我而言，
试试这个
$(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>我认为最简单的解决方案是：
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>
你可以简单地使用
// 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以上是关于顺畅滚动到顶部的主要内容，如果未能解决你的问题，请参考以下文章
添加滚动到顶部按钮（Ionic 2 | Typescript）