如何滚动HTML页面到给定的锚

我想让浏览器通过使用JavaScript将页面滚动到给定的锚点。

我在HTML代码中指定了name或id属性:

 <a name="anchorName">..</a>

或

 <h1 id="anchorName2">..</h1>

我希望得到与你通过导航到http://server.com/path#anchorName所得到的相同的效果。应该滚动页面，使锚点靠近页面可见部分的顶部。

589623 次浏览
小开

你可以使用jQuery的.animate ()， .offset ()和scrollTop。就像

$(document.body).animate({
'scrollTop':   $('#anchorName2').offset().top
}, 2000);

示例链接:http://jsbin.com/unasi3/edit

如果你不想做动画，可以像这样使用.scrollTop ():

$(document.body).scrollTop($('#anchorName2').offset().top);

或者JavaScript的原生location.hash，比如:

location.hash = '#' + anchorid;
小开
最佳答案 
function scrollTo(hash) {
location.hash = "#" + hash;
}

根本不需要jQuery !

小开

简单的方式:

var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();
小开 
$(document).ready ->
$("a[href^='#']").click ->
$(document.body).animate
scrollTop: $($(this).attr("href")).offset().top, 1000
小开

伟大的jAndy解法，但平滑滚动似乎有问题在Firefox中工作。

在Firefox中也可以这样编写。

(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop':   $('#anchorName2').offset().top
}, 2000);
});
})(jQuery);
小开

我找到了一个简单的jQuery解决方案的CSS-Tricks。这就是我现在用的。

$(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;
}
}
});
});
小开

大多数答案都不必要地复杂。

如果你只是想要跳到目标元素，你不需要JavaScript:

# the link:
<a href="#target">Click here to jump.</a>


# target element:
<div id="target">Any kind of element.</div>

如果你想要动画地滚动到目标，请参考5 hahil的回答。

小开

CSS-Tricks的解决方案不再适用于jQuery 2.2.0。它将抛出一个选择器错误:

JavaScript运行时错误:语法错误，无法识别表达式:a[href*=#]:not([href=#])

我通过改变选择器来修复它。完整的片段如下:

$(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;
}
}
});
});
小开

这是一个没有jQuery的纯JavaScript解决方案。它在Chrome和Internet Explorer上进行了测试，但没有在iOS上进行测试。

function ScrollTo(name) {
ScrollToResolver(document.getElementById(name));
}


function ScrollToResolver(elem) {
var jump = parseInt(elem.getBoundingClientRect().top * .2);
document.body.scrollTop += jump;
document.documentElement.scrollTop += jump;
if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
elem.lastjump = Math.abs(jump);
setTimeout(function() { ScrollToResolver(elem);}, "100");
} else {
elem.lastjump = null;
}
}

演示:https://jsfiddle.net/jd7q25hg/12/

小开
这是一个将页面滚动到锚点的工作脚本。 要设置它，只需给锚链接一个与你想要滚动到的锚的name属性匹配的id 
<script>
jQuery(document).ready(function ($){
$('a').click(function (){
var id = $(this).attr('id');
console.log(id);
if ( id == 'cet' || id == 'protein' ) {
$('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow');
}
});
});
</script>
小开

在2018年，你不需要jQuery来做这样简单的事情。内置的scrollIntoView()方法支持"behavior"属性来平滑地滚动到页面上的任何元素。您甚至可以用散列更新浏览器URL，使其可收藏。

从本教程关于滚动HTML书签，这里有一个本地的方法来自动添加平滑滚动到你页面上的所有锚链接:

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()
    })
}
小开

如此:

$('.scroll').on("click", function(e) {


e.preventDefault();


var dest = $(this).attr("href");


$("html, body").animate({


'scrollTop':   $(dest).offset().top


}, 2000);


});

https://jsfiddle.net/68pnkfgd/

只需添加类'scroll'到任何你想要动画的链接

小开 

jQuery("a[href^='#']").click(function(){
jQuery('html, body').animate({
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
}, 1000);
return false;
});

小开

2018-2020 有一种非常方便的方法来滚动到元素:

el.scrollIntoView({
behavior: 'smooth', // smooth scroll
block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

但据我了解，它并没有下面的选项那么好的支持。

Enter image description here

了解更多关于该方法的信息

如果元素必须在顶部:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset


window.scrollTo({
top: topPos, // scroll so that the element is at the top of the view
behavior: 'smooth' // smooth scroll
})

< a href = " https://codepen。io/iliyazelenko/pen/Oopwpp" rel="noreferrer"> CodePen演示示例 . io/iliyazelenko/pen/Oopwpp" rel="noreferrer">

如果你想让元素在中心:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);


window.scroll({
top: rect.top + rect.height / 2 - viewHeight / 2,
behavior: 'smooth' // smooth scroll
});

< a href = " https://codepen。io/iliyazelenko/pen/MqpBOq" rel="noreferrer"> CodePen演示示例 . io/iliyazelenko/pen/MqpBOq" rel="noreferrer">

支持:

< a href = " https://i.stack.imgur.com/7etqH.png " rel = " noreferrer " > < img src = " https://i.stack.imgur.com/7etqH.png " alt = "введитесюдаописаниеизображения" / > < / >

他们写道，scroll与scrollTo是相同的方法，但在scrollTo中支持更好。

关于方法的更多信息。

小开

Vue.js 2解决方案…添加一个简单的data属性来强制更新:

  const app = new Vue({
...


, updated: function() {
this.$nextTick(function() {
var uri = window.location.href
var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
if ( String(anchor).length > 0 && this.updater === 'page_load' ) {
this.updater = "" // only on page-load !
location.href = "#"+String(anchor)
}
})
}
});
app.updater = "page_load"


/* Smooth scrolling in CSS - it works in HTML5 only */
html, body {
scroll-behavior: smooth;
}
小开

平稳滚动到适当的位置

获取正确的 y坐标并使用window.scrollTo({top: y, behavior: 'smooth'})

const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;


window.scrollTo({top: y, behavior: 'smooth'});
小开

让浏览器滚动页面到给定锚点的最简单方法是在你的style.css文件中添加*{scroll-behavior: smooth;}，在你的HTML导航中使用#NameOfTheSection。

*{scroll-behavior: smooth;}
<a href="#scroll-to">Click to Scroll<a/>


<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>


<section id="scroll-to">
<p>it will scroll down to this section</p>
</section>


提交答案