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

Question

我在带有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);

Answer 1

如果有人需要一个vanilla 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);
};

Answer 2

我让我的另一个开发朋友帮助我，我们想出了这个，它有效，没有动画，我能做到，我只是不需要它..

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

Answer 3

我使用Element.scrollIntoView（）方法修复了这个问题：

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

它适用于Chrome，Firefox和Internet Explorer - 我还没有在任何其他浏览器中测试它。

Answer 4

老问题，但这里是一个纯粹的js函数，它将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) ;
    }
};

Answer 5

一个有趣的怪癖：

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

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

如果您的网站不是webapp，那么可能适用于大多数情况=）

编辑：现代浏览器中没有往返，更改URL的唯一部分是锚点。 我对不是webapp的考虑是那些网站通常编辑锚和历史。

Answer 6

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

http://jsfiddle.net/qKGv8/

API参考：

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

Answer 7

promptAnswerBlock - > ul元素id

$（'＃promptAnswerBlock'）。scrollTop（$（'＃promptAnswerBlock'）[0] .scrollHeight + 150）;

150只是一个偏移值

你可以根据你的要求进行调整