我试图将页面移动到<div>元素。
我已经尝试了下一个代码无效:
document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';
我试图将页面移动到<div>元素。
我已经尝试了下一个代码无效:
document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';
当前回答
下面是一个函数,它可以包含那些固定头的可选偏移量。不需要外部库。
function scrollIntoView(selector, offset = 0) {
window.scroll(0, document.querySelector(selector).offsetTop - offset);
}
您可以使用JQuery获取元素的高度并滚动到它。
var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)
2018年3月更新
不使用JQuery滚动到这个答案
scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)
其他回答
你可以使用一个锚来“聚焦”div。例如:
<div id="myDiv"></div>
然后使用下面的javascript:
// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";
我经常使用滚动容器到其内容的方法。
/**
@param {HTMLElement} container : element scrolled.
@param {HTMLElement} target : element where to scroll.
@param {number} [offset] : scroll back by offset
*/
var scrollAt=function(container,target,offset){
if(container.contains(target)){
var ofs=[0,0];
var tmp=target;
while (tmp!==container) {
ofs[0]+=tmp.offsetWidth;
ofs[1]+=tmp.offsetHeight;
tmp=tmp.parentNode;
}
container.scrollTop = Math.max(0,ofs[1]-(typeof(offset)==='number'?offset:0));
}else{
throw('scrollAt Error: target not found in container');
}
};
如果你想覆盖全局,你也可以这样做:
HTMLElement.prototype.scrollAt=function(target,offset){
if(this.contains(target)){
var ofs=[0,0];
var tmp=target;
while (tmp!==this) {
ofs[0]+=tmp.offsetWidth;
ofs[1]+=tmp.offsetHeight;
tmp=tmp.parentNode;
}
container.scrollTop = Math.max(0,ofs[1]-(typeof(offset)==='number'?offset:0));
}else{
throw('scrollAt Error: target not found in container');
}
};
Chrome和Firefox
我一直在研究这个问题,我发现了这个问题,从某种程度上来说,这是最自然的方法。当然,这是我现在最喜欢的画卷。:)
const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
top: y,
behavior: 'smooth'
});
IE、Edge和Safari的支持者
注意那个窗口。滚动({…options})在IE、Edge和Safari上不支持。在这种情况下,使用它可能是最好的 element.scrollIntoView()。(在IE 6上支持)。你很可能(读:未经测试)传入选项而没有任何副作用。
当然,这些可以被包装在一个函数中,根据所使用的浏览器来执行。
焦点只能放在互动元素上…Div只表示页面的一个逻辑部分。
也许你可以在div周围设置边框,或者改变它的颜色来模拟焦点。是的,可见性不是焦点。
下面是一个函数,它可以包含那些固定头的可选偏移量。不需要外部库。
function scrollIntoView(selector, offset = 0) {
window.scroll(0, document.querySelector(selector).offsetTop - offset);
}
您可以使用JQuery获取元素的高度并滚动到它。
var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)
2018年3月更新
不使用JQuery滚动到这个答案
scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)