Answers:
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,并且您正在通过ID链接到它name
,请使用以下命令:
$('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;
});
scrollTop: $(this.hash).offset().top
代替scrollTop: $(this.href).offset().top
吗?
scrollTop: $(href).offset().top - 72
正确的语法是:
//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
$('html,body').animate({scrollTop:$(location.hash).offset().top}, 500);
});
简化:干
function smoothScrollingTo(target){
$('html,body').animate({scrollTop:$(target).offset().top}, 500);
}
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
smoothScrollingTo(this.hash);
});
$(document).ready(function(){
smoothScrollingTo(location.hash);
});
的说明href*=\\#
:
*
表示它匹配包含#
char的内容。因此只匹配锚点。有关此含义的更多信息,请参见此处\\
是因为#
在CSS选择器中,字符是特殊字符,因此我们必须对其进行转义。$('a')
,以$('a[href*=#]')
服务于仅锚网址
<a href="javascript:$('#test').css('background-color', '#000')">Test</a>
。您应该使用$('a[href^=#]')
匹配所有以井号字符开头的网址。
a[href^=\\#]
CSS3中的新热点。这比此页面上列出的每种方法都容易得多,并且不需要Javascript。只要在您的CSS中输入以下代码,所有指向您自己页面内位置的链接就会突然出现滚动动画。
html{scroll-behavior:smooth}
之后,任何指向div的链接都将平滑地转到这些部分。
<a href="#section">Section1</a>
编辑:对于那些对上面的标签感到困惑的人。基本上,这是一个可单击的链接。然后,您可以在网页中的某个位置添加另一个div标签,例如
<div classname="section">content</div>
在这方面,链接将是可单击的,并且将转到任何#section,在这种情况下,这就是我们称为div的div。
顺便说一句,我花了几个小时试图使它工作。在一些晦涩的注释部分找到了解决方案。这是越野车,无法在某些标签中使用。在体内没有作用。当我将它放在CSS文件的html {}中时,它终于可以工作了。
$('a[href*=#]').click(function(event){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
event.preventDefault();
});
这对我来说很完美
令我惊讶的是,没有人发布过一种本机解决方案,该解决方案还负责更新浏览器位置哈希以进行匹配。这里是:
let anchorlinks = document.querySelectorAll('a[href^="#"]')
for (let item of anchorlinks) { // relitere
item.addEventListener('click', (e)=> {
let hashval = item.getAttribute('href')
let target = document.querySelector(hashval)
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
})
history.pushState(null, null, hashval)
e.preventDefault()
})
}
参见教程:http : //www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml
对于带有粘性标头的网站,scroll-padding-top
可以使用CSS提供偏移量。
只有CSS
html {
scroll-behavior: smooth !important;
}
您只需要添加此内容。现在,您的内部链接滚动行为将像流一样平滑。
注:所有最新的浏览器(Opera
,Chrome
,Firefox
等)支持此功能。
要了解详细信息,请阅读本文
我建议您编写以下通用代码:
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;});
您可以在此处看到非常好的文章:jquery-effet-smooth-scroll-defilement-fluide
$(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/
原生支持哈希ID滚动的平滑滚动。
html {
scroll-behavior: smooth;
}
您可以看一下:https : //www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
给出的答案有效,但禁用传出链接。在具有额外奖励的版本下,缓和(摆动)并尊重传出链接。
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
stop()
但是url碎屑无法正常工作:“后退”按钮没有恢复原状,这是因为在动画完成后在url中设置了碎屑时。最好不要在URL中添加碎屑,例如airbnb就是这样做的。
的HTML
<a href="#target" class="smooth-scroll">
Link
</a>
<div id="target"></div>
或使用绝对完整网址
<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;
}
}
});
});
如今,现代浏览器的速度要快一些。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
}
}
使用滚动行为可以做到这一点。添加以下属性。
scroll-behavior: smooth;
就是这样。不需要JS。
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav, scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
scroll-container {
display: block;
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<scroll-container>
<scroll-page id="page-1">1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container>
PS:请检查浏览器兼容性。
添加:
function () {
window.location.hash = href;
}
在某种程度上抵消了垂直偏移
top - 72
在Firefox和IE中,而不是在Chrome中。基本上,页面会根据偏移量平滑滚动到应停止的位置,然后再跳至没有偏移量的页面位置。
它确实将哈希值添加到url的末尾,但是按回去并不会使您回到顶部,它只是从url中删除哈希值,并将其保留在查看窗口中。
这是我正在使用的完整js:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top - 120
}, 500, function () {
window.location.hash = href;
});
return false;
});
此解决方案也适用于以下URL,而不会中断指向不同页面的锚链接。
http://www.example.com/dir/index.html
http://www.example.com/dir/index.html#anchor
./index.html
./index.html#anchor
等等
var $root = $('html, body');
$('a').on('click', function(event){
var hash = this.hash;
// Is the anchor on the same page?
if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
$root.animate({
scrollTop: $(hash).offset().top
}, 'normal', function() {
location.hash = hash;
});
return false;
}
});
我尚未在所有浏览器中对此进行测试。
经过测试和验证的代码
<script>
jQuery(document).ready(function(){
// Add smooth scrolling to all links
jQuery("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
jQuery('html, body').animate({
scrollTop: jQuery(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
我对“ / xxxxx#asdf”和“ #asdf” href锚均执行了此操作
$("a[href*=#]").on('click', function(event){
var href = $(this).attr("href");
if ( /(#.*)/.test(href) ){
var hash = href.match(/(#.*)/)[0];
var path = href.match(/([^#]*)/)[0];
if (window.location.pathname == path || path.length == 0){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
window.location.hash = hash;
}
}
});
这是我为多个链接和锚点实现的解决方案,以实现平滑滚动:
http://www.adriantomic.se/development/jquery-localscroll-tutorial/ 如果您在导航div中设置了导航链接,并使用以下结构声明了此链接:
<a href = "#destinationA">
以及您相应的锚标记目的地:
<a id = "destinationA">
然后将其加载到文档的头部:
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
// Scroll the whole document
$('#menuBox').localScroll({
target:'#content'
});
});
</script>
感谢@Adriantomic
永远不要忘记offset()函数会赋予您元素在文档中的位置。因此,当需要相对于其父级滚动元素时,应使用此元素;
$('.a-parent-div').find('a').click(function(event){
event.preventDefault();
$('.scroll-div').animate({
scrollTop: $( $.attr(this, 'href') ).position().top + $('.scroll-div').scrollTop()
}, 500);
});
关键是获取scroll-div的scrollTop并将其添加到scrollTop。如果您不这样做,position()函数将始终为您提供不同的位置值。
可以window.scroll()
与锚标记的偏移顶部配合使用behavior: smooth
并top
设置其位置,以确保锚标记位于视口的顶部。
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', function (e) {
e.preventDefault();
var href = this.getAttribute("href");
var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
//gets Element with an id of the link's href
//or an anchor tag with a name attribute of the href of the link without the #
window.scroll({
top: elem.offsetTop,
left: 0,
behavior: 'smooth'
});
//if you want to add the hash to window.location.hash
//you will need to use setTimeout to prevent losing the smooth scrolling behavior
//the following code will work for that purpose
/*setTimeout(function(){
window.location.hash = this.hash;
}, 2000); */
});
});
演示:
您只需将CSS属性设置scroll-behavior
为smooth
(大多数现代浏览器都支持)即可,从而无需使用Javascript。
感谢您的分享,Joseph Silber。这是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"
});
});
});
在将哈希添加到浏览器url时,需要jquery并进行动画处理以使用指定的名称(而不是ID)锚定标记。还可修复大多数使用jquery的答案中的错误,该错误中的#号没有以转义的反斜杠作为前缀。不幸的是,后退按钮无法正确导航回先前的哈希链接...
$('a[href*=\\#]').click(function (event)
{
let hashValue = $(this).attr('href');
let name = hashValue.substring(1);
let target = $('[name="' + name + '"]');
$('html, body').animate({ scrollTop: target.offset().top }, 500);
event.preventDefault();
history.pushState(null, null, hashValue);
});