我的页面上有几个超链接。一个常见问题,用户将阅读时,他们访问我的帮助部分。
使用锚链接,我可以使页面滚动到锚,并引导用户到那里。
有没有办法使滚动流畅?
但请注意,他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
我的页面上有几个超链接。一个常见问题,用户将阅读时,他们访问我的帮助部分。
使用锚链接,我可以使页面滚动到锚,并引导用户到那里。
有没有办法使滚动流畅?
但请注意,他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
当前回答
现在的浏览器要快一些。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
}
}
其他回答
$('a[href*=#]').click(function(event){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
event.preventDefault();
});
这对我来说是完美的
$("a").on("click", function(event){
//check the value of this.hash
if(this.hash !== ""){
event.preventDefault();
$("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);
//add hash to the current scroll position
window.location.hash = this.hash;
}
});
这里已经有很多很好的答案——但是他们都忽略了一个事实,即空锚必须被排除在外。否则,只要单击空锚,这些脚本就会生成JavaScript错误。
在我看来,正确答案是这样的:
$('a[href*=\\#]:not([href$=\\#])').click(function() {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
只有CSS
html {
scroll-behavior: smooth;
}
你只需要加上这个。现在你的内部链接滚动行为将是流畅的像一个流。
程序化:一些额外的和高级的东西
// Scroll to specific values
// window.scrollTo or window.scroll
window.scroll({
top: 1000,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 250, // could be negative value
left: 0,
behavior: 'smooth'
});
// Scroll to a certain element
document.getElementById('el').scrollIntoView({
behavior: 'smooth'
})
注意:所有最新的浏览器(Opera, Chrome, Firefox等)都支持此功能。
要详细了解,请阅读这篇文章
对于正在寻找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;