我的页面上有几个超链接。一个常见问题,用户将阅读时,他们访问我的帮助部分。
使用锚链接,我可以使页面滚动到锚,并引导用户到那里。
有没有办法使滚动流畅?
但请注意,他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
我的页面上有几个超链接。一个常见问题,用户将阅读时,他们访问我的帮助部分。
使用锚链接,我可以使页面滚动到锚,并引导用户到那里。
有没有办法使滚动流畅?
但请注意,他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
当前回答
如果你在页面上有一个简单的按钮可以向下滚动到一个div,并且希望返回按钮通过跳到顶部来工作,只需添加以下代码:
$(window).on('hashchange', function(event) {
if (event.target.location.hash=="") {
window.scrollTo(0,0);
}
});
这也可以扩展到跳转到不同的div,通过读取哈希值,并像Joseph Silbers的答案一样滚动。
其他回答
现在的浏览器要快一些。setInterval可能有用。现在这个功能在Chrome和Firefox中运行良好。(safari有点慢,不用IE)
function smoothScroll(event) {
if (event.target.hash !== '') { //Check if tag is an anchor
event.preventDefault()
const hash = event.target.hash.replace("#", "")
const link = document.getElementsByName(hash)
//Find the where you want to scroll
const position = link[0].getBoundingClientRect().y
let top = 0
let smooth = setInterval(() => {
let leftover = position - top
if (top === position) {
clearInterval(smooth)
}
else if(position > top && leftover < 10) {
top += leftover
window.scrollTo(0, top)
}
else if(position > (top - 10)) {
top += 10
window.scrollTo(0, top)
}
}, 6)//6 milliseconds is the faster chrome runs setInterval
}
}
HTML
<a href="#target" class="smooth-scroll">
Link
</a>
<div id="target"></div>
或使用绝对完整的URL
<a href="https://somewebsite.com/#target" class="smooth-scroll">
Link
</a>
<div id="target"></div>
jQuery
$j(function() {
$j('a.smooth-scroll').click(function() {
if (
window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&& window.location.hostname == this.hostname
) {
var target = $j(this.hash);
target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$j('html,body').animate({
scrollTop: target.offset().top - 70
}, 1000);
return false;
}
}
});
});
谢谢分享,约瑟夫·西尔伯。以下是你2018年的ES6解决方案,其中有一些小改动,以保持标准行为(滚动到顶部):
document.querySelectorAll("a[href^=\"#\"]").forEach((anchor) => {
anchor.addEventListener("click", function (ev) {
ev.preventDefault();
const targetElement = document.querySelector(this.getAttribute("href"));
targetElement.scrollIntoView({
block: "start",
alignToTop: true,
behavior: "smooth"
});
});
});
这将使jQuery很容易识别目标哈希并知道何时何地停止。
$('a[href*="#"]').click(function(e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
对于正在寻找ReactJS (TypeScript)方法的用户。
function Hero() {
const scrollToView = (e: any) => {
e.preventDefault();
// Scroll to a certain element
document.getElementById("about-section")?.scrollIntoView({
behavior: "smooth",
});
};
return (
<section id="hero">
<button
onClick={scrollToView}
>
Learn More
</button>
</section>
);
}
export default Hero;
以及about-section组件
const AboutSection = () => {
return (
<section id="about-section" >
<h1>About Section</h1>
</section>
);
};
export default AboutSection;