我的页面上有几个超链接。一个常见问题,用户将阅读时,他们访问我的帮助部分。
使用锚链接,我可以使页面滚动到锚,并引导用户到那里。
有没有办法使滚动流畅?
但请注意,他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
我的页面上有几个超链接。一个常见问题,用户将阅读时,他们访问我的帮助部分。
使用锚链接,我可以使页面滚动到锚,并引导用户到那里。
有没有办法使滚动流畅?
但请注意,他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
当前回答
对于正在寻找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;
其他回答
不需要任何js只是使用滚动行为:平滑的html标签就是这样
html{
scroll-behavior: smooth;
}
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
官员: http://css-tricks.com/snippets/jquery/smooth-scrolling/
CSS3的新热点。这比本页列出的所有方法都要简单得多,而且不需要Javascript。只需输入下面的代码到你的css和所有的链接指向你自己的页面内的位置将有一个平滑的滚动动画。
html{scroll-behavior:smooth}
之后,任何指向div的链接都将平滑地滑到这些部分。
<a href="#section">Section1</a>
编辑:对于那些对上面的一个标签感到困惑的人。基本上它是一个可点击的链接。然后你可以在你的网页的某个地方有另一个div标签
<div id="section">content</div>
在这种情况下,a链接将是可点击的,并将转到#section是什么,在这种情况下,它是我们称为section的div。
顺便说一句,我花了好几个小时才让它工作。在一些晦涩的评论区找到了解决方案。它是错误的,不会工作在一些标签。对身体不起作用。当我把它放在CSS文件中的html{}中时,它终于工作了。
2018年4月更新:现在有一种本地的方法来做到这一点:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
目前只有最先进的浏览器支持这一功能。
对于旧的浏览器支持,你可以使用jQuery技术:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
这是小提琴:http://jsfiddle.net/9SDLw/
如果你的目标元素没有ID,你通过它的名字链接到它,使用这个:
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
为了提高性能,你应该缓存$('html, body')选择器,这样它就不会每次点击锚时都运行:
var $root = $('html, body');
$('a[href^="#"]').click(function () {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
如果你想要更新URL,在animate回调中做:
var $root = $('html, body');
$('a[href^="#"]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
这将使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;
});
});