如何滚动到 ul 列表中的 li 元素答案

【问题标题】：How to scroll to li element in a ul list如何滚动到 ul 列表中的 li 元素
【发布时间】：2012-10-03 14:43:23
【问题描述】：

我在一个带有 li 元素的 div 内有一个 ul 列表，而 li 元素内是一个复选框。我有复选框的 ID。所以我想获取复选框的父 li 元素并滚动到它的位置。而且我不能让它工作。

我的html是这样的：

<div id="divElement">
   <ul>
      <li>
         <input type="checkbox" id="343532532523" />
      </li>
   </ul>
</div>

我尝试了这两种方法，但它们对我不起作用：

$('#divElement').scrollTop($('#343532532523').parent().position().top);
$('#divElement').firstChild().scrollTop($('#343532532523).parent().position().top);

【问题讨论】：

你能把例子贴在 jsfiddle.net 上吗？
你想去LI元素还是获取那个LI元素的位置？

标签： javascript jquery list web

【解决方案1】：

如果有人需要香草 JS 版本，以下对我来说效果很好，50 的值只是为了让我在靠近列表顶部时显示整个项目。你可以调整它。

function updateListSelection(liID) {

    var list = document.getElementById("id Tag Of The <UL> element"),
        targetLi = document.getElementById(liID); // id tag of the <li> element

    list.scrollTop = (targetLi.offsetTop - 50);
};

【讨论】：

谢谢，也适用于 IE8。

【解决方案2】：

我的另一个开发朋友帮助我，我们想出了这个并且它可以工作，没有动画，我可以做到我只是不需要它..

var offset = $('#someDivElementId ul li').first().position().top;
$('#someDivElementId').scrollTop($('#23532532532532').parent().position().top - offset);

【讨论】：

【解决方案3】：

我使用 Element.scrollIntoView() 方法解决了这个问题：

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

它可以在 Chrome、Firefox 和 Internet Explorer 中运行 - 我还没有在任何其他浏览器中测试过。

【讨论】：

这绝对应该是公认的答案
这在浏览器中是否得到很好的支持？在野生动物园中也是如此？
@SandeshSapkota 抱歉，我不知道。当时我们不是为 Safari 开发的。

【解决方案4】：

老问题，但这是一个纯 js 函数，如果 LI 当前位于顶部上方，则将 LI 滚动到顶部视图，如果当前位于底部下方，则滚动到底部视图。如果您使用向下和向上箭头滚动它（使用 addEventListener 处理 keydown 和 keyup 事件），这可以平滑滚动 UL。

function scrollUL(li) {
    // scroll UL to make li visible
    // li can be the li element or its id
    if (typeof li !== "object"){
        li = document.getElementById(li);
    }
    var ul = li.parentNode;
    // fudge adjustment for borders effect on offsetHeight
    var fudge = 4;
    // bottom most position needed for viewing
    var bottom = (ul.scrollTop + (ul.offsetHeight - fudge) - li.offsetHeight);
    // top most position needed for viewing
    var top = ul.scrollTop + fudge;
    if (li.offsetTop <= top){
        // move to top position if LI above it
        // use algebra to subtract fudge from both sides to solve for ul.scrollTop
        ul.scrollTop = li.offsetTop - fudge;
    } else if (li.offsetTop >= bottom) {
        // move to bottom position if LI below it
        // use algebra to subtract ((ul.offsetHeight - fudge) - li.offsetHeight) from both sides to solve for ul.scrollTop
        ul.scrollTop = li.offsetTop - ((ul.offsetHeight - fudge) - li.offsetHeight) ;
    }
};

【讨论】：

【解决方案5】：

一个有趣的怪癖：

window.location.href = window.location.origin+window.location.pathname+window.location.search+"#343532532523"

它的作用是获取 url 部分并将其设置回元素的实际锚点

如果您的网站不是 webapp 之类的东西，可能适用于大多数情况 =)

编辑：在现代浏览器中没有往返，唯一更改的 URL 部分是锚点。对于不是 web 应用，我的考虑是这类网站通常会编辑锚点和历史记录。

【讨论】：

它可能工作，但往返服务器以向下滚动页面？？
@SteveGreatrex 至少在当前的 chrome 和 Firefox 中没有往返。此外，这是一个怪癖，为了好玩，没有理由 -1 如果它有效

【解决方案6】：

这是一个简单的演示，它使用 jQuery position() 获取父 UL 中的 LI 位置，然后使用 animate() 滚动视图中的复选框

http://jsfiddle.net/qKGv8/

API 参考：

http://api.jquery.com/position/ http://api.jquery.com/animate/

【讨论】：

【解决方案7】：

promptAnswerBlock-->ul 元素id

$('#promptAnswerBlock').scrollTop($('#promptAnswerBlock')[0].scrollHeight + 150);

150 只是一个偏移值

您可以根据自己的需要进行调整

【讨论】：

尽管您的解决方案可能有效，但您应该尝试包含更多说明性文字。