我想让浏览器通过使用JavaScript将页面滚动到给定的锚点。
我已经在HTML代码中指定了一个名称或id属性:
<a name="anchorName">..</a>
or
<h1 id="anchorName2">..</h1>
我希望获得与您通过导航到http://server.com/path#anchorName所获得的相同效果。应该滚动页面,使锚点靠近页面可见部分的顶部。
我想让浏览器通过使用JavaScript将页面滚动到给定的锚点。
我已经在HTML代码中指定了一个名称或id属性:
<a name="anchorName">..</a>
or
<h1 id="anchorName2">..</h1>
我希望获得与您通过导航到http://server.com/path#anchorName所获得的相同效果。应该滚动页面,使锚点靠近页面可见部分的顶部。
当前回答
这是一个将页面滚动到锚点的工作脚本。 要设置它,只需给锚链接一个与要滚动到的锚的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>
其他回答
你可以使用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 = '#' + anchorid;
平稳滚动到适当的位置
得到正确的y坐标并使用window。scrollTo({top: y,行为:'平滑'})
const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({top: y, behavior: 'smooth'});
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;
}
function scrollTo(hash) {
location.hash = "#" + hash;
}
根本不需要jQuery !
很好的解决方案由jAndy,但平滑滚动似乎有问题在Firefox中工作。
在Firefox中也可以这样编写。
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#anchorName2').offset().top
}, 2000);
});
})(jQuery);