顺畅滚动到顶部

Question

我现在几个小时都在寻找这个,我没有解决方案.我想要一个平滑的滚动到页面顶部.我已经有平滑的滚动来分隔页面中的锚点,.js文件附着在我的网站上,但我不能使用锚点作为顶部,因为我使用的是免费托管网站的模板,内置的页面构建工具不允许我在身体区域上方进行编辑.

这是我顺利滚动的地方.我一直在尝试设置"平滑滚动到元素 - 没有jquery插件"但我不知道如何在无数次尝试之后安排它.我也用过,window.scrollTo(0, 0);但它会立即滚动.谢谢!

另外:http: //jsfiddle.net/WFd3V/ - 代码可能是标签,class="smoothScroll"因为我的其他元素使用它,但我不知道如何将它与href="javascript:window.scrollTo(0,0);"其他任何可能将页面混合的内容混合使用顶部没有锚.

Answer 1

以下是我使用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.数字越大 - 滚动越平滑/越慢.

Answer 2

I think the simplest solution is:

window.scrollTo({top: 0, behavior: 'smooth'});

If you wanted instant scrolling then just use:

window.scrollTo({top: 0});

Can be used as a function:

// Scroll To Top

function scrollToTop() {

window.scrollTo({top: 0, behavior: 'smooth'});

}

Or as an onclick handler:

<button onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Scroll to Top</button>

Answer 3

window.scroll({top: 0, behavior: "smooth"})

只需使用这段代码，它就会完美运行，您可以将其包装到方法或事件中。

Answer 4

仅限纯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">

Answer 5

你应该开始使用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

我认为你试图根据a来上下移动你的文本$.click().在我的回答中,它左右滑动.您可以使用css top属性而不是上下来轻松地重新格式化left.

一旦你弄清楚如何上下移动整个内容div,你就可以创建一个relative容器来保存所有内容,absolute div并div通过设置它们来循环操作所有内容top.这里有一个快速入门absolute中relative:http://css-tricks.com/absolute-positioning-inside-relative-positioning/

我的所有动画都有relative容器和absolute内容.这就是我如何创建一个可以立即压缩整个数据库的自定义gridview插件.

此外,在div动画方面,确实没有过度使用s.试图让1 div做一切都是一场噩梦.

试着看看你是否可以将我的小提琴重新格式化为垂直幻灯片.一旦你做到这一点,研究absolute在relative一点点.如果您还有其他问题,请提出另一个问题.

将你的思想转变为这些哲学,你将开始通过这种类型的编码.

Answer 6

自从提出这个问题以来已经过去了一段时间了。

现在不仅可以向 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

Answer 7

嗯为我准备好了,

试试这个

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

Answer 8

你可以简单地使用

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