有没有办法滚动到锚点而不是使用 javascript 跳转（类似于平滑滚动）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6451193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there way to scroll to anchor rather than jump with javascript (something like smooth scroll)
提问by testere
I have a large document with numbered anchor tags as shown below. And a textbox to punch the numbers in to go to anchor which uses window.location.hash
我有一个带有编号锚标签的大文档，如下所示。还有一个文本框，用于输入数字以转到使用window.location.hash 的锚点
I am also using arrow keys to go next or previous anchors. I want to scroll to the anchor so to give some sense of direction.
我还使用箭头键转到下一个或上一个锚点。我想滚动到锚点，以便给出一些方向感。
<a name="1">
some text
<a name="2">
some text
<a name="3">
here is my function
这是我的功能
function updatePageNumber()
{
var pagenumber;
pagenumber = document.getElementById('pageNumber').value;
window.location.hash = pagenumber;
}
Jumping to anchor is very ugly and people loose sense of direction in the text. So is there a way to scroll to anchor with JavaScript. I know there are lots of jQuery examples, but I don't know jQuery and couldn't find JavaScript.
跳转到锚点非常丑陋，人们在文本中失去方向感。那么有没有办法使用 JavaScript 滚动到锚点。我知道有很多 jQuery 示例，但我不知道 jQuery 并且找不到 JavaScript。
Most important reason is I want to see my page number on the address bar!
最重要的原因是我想在地址栏上看到我的页码！
采纳答案by testere
回答by Troy SK
Add jQuery library.
添加 jQuery 库。
Use the following script to do a smooth scroll to the target element you want.
使用以下脚本平滑滚动到所需的目标元素。
jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);
targetis the id of the target element and 1000is the duration of the animation.
target是目标元素的id，1000是动画的持续时间。
回答by Krishna Torque
Use this code and enjoy
使用此代码并享受
$(document).ready(function(){
$("#btop").hide(); // replace only #btop with your <div id=" ">
$(function(){
$(window).scroll(function(){
if ($(this).scrollTop()>100){
$('#btop').fadeIn(); // replace only #btop with your <div id=" ">
}
else{
$('#btop').fadeOut(); // replace only #btop with your <div id=" ">
}
});
$('#btop a').click(function(){ // replace only #btop with your <div id=" ">
$('body,html').animate({
scrollTop:0
},200); // to speed up scroll replace 200 to 300 or 500
return false;
});
});
});
回答by nico
You may want to check out this tutorialor google for "JS smooth scroll"
您可能想查看本教程或谷歌“JS 平滑滚动”
回答by Tamás
There is no built-in smooth scrolling in JavaScript so you would have to implement it yourself -- but why re-invent the wheel if you already have it in jQueryand you probably won't have to add more than two or three lines of code? Just download jQuery and the ScrollTo plugin, add them to your <head>section in a <script>tag and then use this to scroll to an element with a given ID:
JavaScript 中没有内置的平滑滚动，因此您必须自己实现它——但是如果您已经在jQuery 中拥有它，为什么要重新发明轮子，而且您可能不必添加超过两行或三行代码？只需下载 jQuery 和ScrollTo 插件，将它们添加到标签中的<head>部分<script>，然后使用它滚动到具有给定 ID 的元素：
$.scrollTo("#my-element-id");
This will scroll to the element whose ID is my-element-idso you have to use the id=...attribute in the anchors and not the name=...attribute.
这将滚动到其 ID 的元素，my-element-id因此您必须id=...在锚点中使用该属性而不是该name=...属性。
If you wish to add this behaviour automatically to all your anchors within a given div(or to the entire page), you can use the LocalScroll pluginwhich makes the entire this as simple as:
如果您希望将此行为自动添加到给定div（或整个页面）内的所有锚点，您可以使用LocalScroll 插件，它使整个过程变得如此简单：
$.localScroll();
回答by jchavannes
I know you said that you don't know jQuery, but you are going to want to use it for the scrolling anyways. Here's a simple exampleof how it could be used.
