我想让浏览器仅使用JavaScript即可将页面滚动到给定的锚点。
我在HTML代码中指定了name
或id
属性:
<a name="anchorName">..</a>
要么
<h1 id="anchorName2">..</h1>
通过导航到,我希望获得与您相同的效果http://server.com/path#anchorName
。应滚动页面,使锚点位于页面可见部分的顶部附近。
我想让浏览器仅使用JavaScript即可将页面滚动到给定的锚点。
我在HTML代码中指定了name
或id
属性:
<a name="anchorName">..</a>
要么
<h1 id="anchorName2">..</h1>
通过导航到,我希望获得与您相同的效果http://server.com/path#anchorName
。应滚动页面,使锚点位于页面可见部分的顶部附近。
Answers:
function scrollTo(hash) {
location.hash = "#" + hash;
}
完全不需要jQuery!
function scrollToHash(hashName) { location.hash = "#" + hashName; }
方法更简单:
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();
scrollIntoViewOptions
可以behavior: "smooth"
选择,但目前仅与Firefox兼容。
您可以使用jQuerys .animate() ,.offset()和scrollTop
。喜欢
$(document.body).animate({
'scrollTop': $('#anchorName2').offset().top
}, 2000);
范例连结:http : //jsbin.com/unasi3/edit
如果你不想有生命使用.scrollTop()一样
$(document.body).scrollTop($('#anchorName2').offset().top);
或location.hash
像
location.hash = '#' + anchorid;
<h1 id="anchorName">
或<a name="anchorName">
,请使用$('#'+hash+',a[name='+hash+']')
或稍作优化的选择器,该选择器$(document.getElementById(hash) || 'a[name='+hash+']')
将首先通过id搜索元素,并仅在未找到a时才搜索a。
$("#selector")
优化,但$("#selector,a[name='selector']")
不会很快进行相同的优化。我想我2.5岁的评论听起来有些奇怪。“优化”是在a[name='selector']
找到ID的情况下避免搜索,而不是对ID的搜索进行优化。
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.
})
但据我了解,他没有以下选项的良好支持。
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
})
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
});
支持:
他们编写scroll
的方法与相同scrollTo
,但是在中支持更好scrollTo
。
没有JQuery的纯JavaScript解决方案。已在Chrome&Ie上测试,未在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;
}
}
在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()
})
}
获取正确的 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'});
scrollIntoView
也是一个不错的选择,但在某些情况下可能无法完美运行。例如,当您需要其他偏移量时。与scrollTo
您只需要添加这样的偏移量:
const yOffset = -10;
window.scrollTo({top: y + yOffset, behavior: 'smooth'});
css html { scroll-behavior: smooth; }
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;
}
}
});
});
大多数答案不必要地复杂。
如果只想跳到目标元素,则不需要JavaScript:
# the link:
<a href="#target">Click here to jump.</a>
# target element:
<div id="target">Any kind of element.</div>
如果要动画滚动到目标,请参阅@Shahil的答案。
这有效:
$('.scroll').on("click", function(e) {
e.preventDefault();
var dest = $(this).attr("href");
$("html, body").animate({
'scrollTop': $(dest).offset().top
}, 2000);
});
https://jsfiddle.net/68pnkfgd/
只需将类“滚动”添加到您要设置动画的任何链接
这是一个工作脚本,它将页面滚动到锚点。要进行设置,只需为锚链接提供一个ID,该ID与要滚动到的锚的name属性匹配。
<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>
我知道这是一个很老的问题,但是我在css-tricks中找到了一个简单的jQuery解决方案。那就是我现在正在使用的那个。
$(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("a[href^='#']").click(function(){
jQuery('html, body').animate({
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
}, 1000);
return false;
});
vue2解决方案...添加简单数据属性以简单地强制更新
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 - works in html5 only */
html, body {
scroll-behavior: smooth;
}
使浏览器将页面滚动到给定锚点的最简单方法是键入您的style.css * {scroll-behavior:smooth;},然后在html导航中使用#NameOfTheSection
*{scroll-behavior: smooth;}
<a href="#scroll-to">Home<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>
<a href="#anchorName">link</a>