在我的HTML页面上,我希望能够"转到"/"滚动到"/"关注"页面上的元素.
通常情况下,我会使用带有a的锚标记href="#something",但我已经使用hashchange事件和BBQ插件来加载此页面.
那么有没有其他方法,通过JavaScript,让页面转到页面上的给定元素？
这是我正在尝试做的基本概述:
function focusOnElement(element_id) {
$('#div_' + element_id).goTo(); // need to 'go to' this element
}
<div id="div_element1">
yadda yadda
</div>
<div id="div_element2">
blah blah
</div>
<span onclick="focusOnElement('element1');">Click here to go to element 1</span>
<span onclick="focusOnElement('element2');">Click here to go to element 2</span>
我正在尝试scrollIntoView()在我的应用程序中使用,但因为我有一个顶部固定栏,当我使用时scrollIntoView(),元素将滚动到固定栏后面.
这意味着当我尝试将一些元素显示给用户时,通过将元素滚动到可见区域,它将被滚动,但是对于另一个看不见的东西,就是这个固定的条形图.
按照我正在尝试做的一个例子:
let element = document.getElementsByClassName('second-element')[0];
element.scrollIntoView();.fixed-element{
height: 30px;
width: 100%;
background-color:black;
position:fixed;
}
.parent-element {
width: 100%;
height: 40000px;
background-color:blue;
}
.element {
width: 100%;
height:100px;
background-color: yellow;
margin-top:10px;
}
.second-element{
width: 100%;
background-color: red;
height:200px;
}<div class="fixed-element"></div>
<div class='parent-element'>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='second-element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div>
<div class='element'></div> …