Question

我有一套常见问题解答，默认情况下隐藏了答案，只留下了问题，我通过在每个问题中嵌入一个id锚点来提供每个特定问题的链接，以便其他人可以链接到它。 / p>

问题格式结构如下：

<div class="contents">
   <h1 class="question" id="titleOfQuestion">Some Question Title</h1>
   <div class="answer" id="titleOfQuestion">>
      Some Answer
   </div>
</div>

如果网址中有ID锚点，我需要在页面加载时将问题滚动到视图中，因为div.contents具有固定的高度且经常溢出属性scroll。

包装在文档就绪处理程序中，以下代码不起作用：

if(document.location.hash) {
var id = document.location.hash.substring(1);
    $('div#' + id).scrollIntoView();
}

我在Firebug中收到错误：TypeError: $(...).scrollIntoView is not a function。但是，如果我从同一位置重新加载网址，则会有效。

这里发生了什么？

Answer 1

scrollIntoView是DOM API的一部分，而不是jQuery。您需要在Element上运行它，而不是jQuery对象：

$('div#' + id)[0].scrollIntoView();

Answer 2

Test

var x = document.getElementById('test');
x.scrollIntoView();

另见plugin

Answer 3

好的，所以这是一个解决方案示例：

<强> HTML：

<div id="view1">
    <i onclick="gotoView(1)">View 1</i> | <i onclick="gotoView(2)">View 2</i> | <i onclick="gotoView(3)">View 3</i>
</div>
<div id="view2">
    <i onclick="gotoView(1)">View 1</i> | <i onclick="gotoView(2)">View 2</i> | <i onclick="gotoView(3)">View 3</i>
</div>
<div id="view3">
    <i onclick="gotoView(1)">View 1</i> | <i onclick="gotoView(2)">View 2</i> | <i onclick="gotoView(3)">View 3</i>
</div>

<强> CSS：

div{height:800px; margin:20px; background:#CCC; text-align:center}
i{cursor:pointer; display:inline-block}
i:hover{background:#C00}

<强> JavaScript的：

function gotoView(viewId){
    document.getElementById("view" + viewId).scrollIntoView();
    window.location.hash = "view" + viewId;
}

尝试这样做可以更好地理解它。

scrollIntoView（）不是页面加载的函数？

3 个答案: