javascript 减慢 html 锚链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9346749/
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
Slow down an html anchor link
提问by Spencer May
I've seen this pretty cool feature on other websites but I can't seem to find it myself.
我在其他网站上看到过这个非常酷的功能，但我自己似乎找不到。
I want to make a link to a different part of the page through an anchor tag scroll and not just jump to the desired id. I suppose a javascript file could help or maybe a css transition but I dont know that transition element it would be.
我想通过锚标记滚动链接到页面的不同部分，而不仅仅是跳转到所需的 id。我想一个 javascript 文件可能会有所帮助，或者可能是一个 css 过渡，但我不知道它会是那个过渡元素。
<a href="#bottom">scroll to bottom</a>
<p id="bottom">bottom</p>
Thanks :)
谢谢 ：）
回答by Spencer May
Since nobody really answered this question before I'll answer with my discovery for people who need it.
由于没有人真正回答过这个问题，我将用我的发现为需要它的人回答。
All you have to do is normal anchor links like this
你所要做的就是像这样的普通锚链接
<a href="#bottom">scroll to bottom</a>
<p id="bottom">bottom</p>
then add this Javascript Code and if you need to change anything, look at the javascript comments
然后添加此 Javascript 代码，如果您需要更改任何内容，请查看 javascript 注释
<script>
$(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {
// Ensure it's a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {
// Find location of target
var targetOffset = $target.offset().top;
$(this).click(function(event) {
// Prevent jump-down
event.preventDefault();
// Animate to target
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
// Set hash in URL after animation successful
location.hash = target;
});
});
}
}
});
// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
</script>
回答by verwirrt
A bit of css did the job for me:
一些 css 为我完成了这项工作：
html { scroll-behavior: smooth; }
I found more useful information here:
我在这里找到了更多有用的信息：
