Question

我有一个OL项目列表。在这些项目的html中，用户可以单击链接，表单将向下滑动。表单上有一个提交按钮。我希望OL滚动到那个按钮。我怎样才能做到这一点？

我试过了$('#buttonId').scrollTop(xxxx)但这没效果。我意识到我需要滚动OL。 $('ol').scrollTop(xxxx)移动滚动条。如何获取xxxx的适当值，以便列表滚动到所需的按钮元素？在OL中，字面上可能有数百个项目。有些东西告诉我它必须是按钮和OL顶部之间的像素数。如果这是正确的，那么如何计算呢？非常感谢任何提示或技巧或样品。

<li>
  <article  class="discussion">
   <section class="replies-container">
   <ol class="replies"></ol>
   <form>
     <fieldset class="reply">
    <textarea  placeholder="Type here to reply to this discussion." maxlength="350"></textarea>
    <input type="submit" value="Reply" class="btn action"/> 
         </fieldset>    
       </form>      
</section>              
</article>
 </li>

我想将此html代码段的父OL滚动到提交按钮$('input.btn.action')的位置。我该如何做到这一点？

Answer 1

尝试这样的事情：

$("#button").scrollTop($("#elementtoScrollToID").offset().top);

您还可以查看jQuery ScrollTo Plugin：

$.scrollTo("#element", 800);

以下是一些演示：
http://demos.flesler.com/jquery/scrollTo/

Answer 2

scrollTo plugin滚动到一个元素，考虑位置和所有内容：http://jsfiddle.net/U8sFx/4/。

$('#ol').scrollTo('li:eq(1)', 2000);
// scroll within the ol to the second li within it
// 2000 makes for a 2 second smooth animation

Answer 3

像scrollTo这样的插件可以很容易地做到这一点，但我不需要在我的网站上充满臃肿。

我使用此代码来实现效果：

$('a#scrollTo').click(function() {
  var top = $('element').position().left;

  $('#parent').animate({scrollTop: top + $('#parent').scrollTop()});
});

Answer 4

使用命名锚点怎么样？如果使用A标记的name属性，则可以在单击链接时通过在第二个A标记的src属性中指定＃字符后的名称来跳转到该页面。

<a name="scrollToHere">Destination</a>

<a href="#scrollToHere">Go to Destination</a>

滚动到元素在<ol> </ol>中的位置

4 个答案: