16

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

7 回答 7

11

如果有人需要香草 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);
};
于 2014-06-23T08:01:50.283 回答
4

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

var offset = $('#someDivElementId ul li').first().position().top;
$('#someDivElementId').scrollTop($('#23532532532532').parent().position().top - offset);
于 2012-10-13T16:54:48.213 回答
3

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

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

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

于 2016-01-11T15:17:07.653 回答
3

老问题，但这是一个纯 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) ;
    }
};
于 2016-01-31T21:18:35.607 回答
0

一个有趣的怪癖：

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

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

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

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

于 2012-10-12T18:33:47.343 回答
0

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

http://jsfiddle.net/qKGv8/

API 参考：

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

于 2012-10-13T01:01:36.980 回答
0

promptAnswerBlock-->ul 元素id

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

150 只是一个偏移值

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

于 2016-08-05T07:16:01.947 回答