我试图将页面移动到<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';
当前回答
最好的,最简短的回答是什么即使是动画效果也有效:
var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});
如果你有一个固定的导航条,只需从顶部值中减去它的高度,所以如果你的固定导航条高度是70px,第2行将看起来像这样:
window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});
解释: 第1行获取元素位置 第2行滚动到元素位置;属性添加平滑的动画效果
其他回答
由于行为“平滑”不工作在Safari, Safari ios,浏览器。我通常使用requestAnimationFrame写一个简单的函数
(function(){
var start;
var startPos = 0;
//Navigation scroll page to element
function scrollTo(timestamp, targetTop){
if(!start) start = timestamp
var runtime = timestamp - start
var progress = Math.min(runtime / 700, 1)
window.scroll(0, startPos + (targetTop * progress) )
if(progress >= 1){
return;
}else {
requestAnimationFrame(function(timestamp){
scrollTo(timestamp, targetTop)
})
}
};
navElement.addEventListener('click', function(e){
var target = e.target //or this
var targetTop = _(target).getBoundingClientRect().top
startPos = window.scrollY
requestAnimationFrame(function(timestamp){
scrollTo(timestamp, targetTop)
})
}
})();
scrollIntoView工作良好:
document.getElementById("divFirst").scrollIntoView();
MDN文档中的完整引用: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
我认为如果你添加一个标签到你的div,它将能够获得焦点:
<div class="divFirst" tabindex="-1">
</div>
我不认为它是有效的,虽然,tabindex只能应用于一个,区域,按钮,输入,对象,选择和文本区域。但不妨试一试。
在四处寻找之后,这是最后对我有用的方法:
找到/定位div在你的dom有滚动条。 对我来说,它看起来是这样的: "div class="table_body table_body_div" scroll_top="0" scroll_left="0" style="width: 1263px;身高:499 px;“ 我用这个xpath: //div[@class='table_body table_body_div'] 使用JavaScript像这样执行滚动: (JavascriptExecutor)司机).executeScript(“参数[0]。scrollLeft =参数[1];",元素,2000);
2000是我想向右滚动的像素数。 如果你想向下滚动div,使用scrollTop而不是scrollLeft。
注意:我尝试使用scrollIntoView,但它不能正常工作,因为我的网页有多个div。如果你只有一个集中注意力的主窗口,这是可行的。 如果你不想使用jQuery,这是我遇到的最好的解决方案。
我经常使用滚动容器到其内容的方法。
/**
@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');
}
};