Question

所以我的HTML看起来像这样：

<section id="nav-wrapper">
  <div class="container">
    <ul id="ul-main_wrapper">
      <li class="item_1""></li>
      <li class="item_2"></li>
      <li class="item_3"></li>
      <li class="item_4"></li>
      <li class="item_5"></li>
      <li class="item_6"></li>
      <li class="item_7"></li>
      <li class="item_8"></li>
      <li class="item_9"></li>
      <li class="item_10"></li>
      <li class="close_clear">Back</li>
    </ul>
  </div>
</section>

我有一个列表全部放在一行上，所以CSS看起来像：

#nav-wrapper {
    width: 100%!important;
    height: auto!important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    bottom: 80px;
}

#ul-main_wrapper li {
    height: 20px;
    width: 20px;
    margin: 2px;
    display: inline-block;
}

onClick列表中的最后一项，我正在尝试让列表滚动回第一项。但是找不到有用的东西。

编辑：

这是一个JSFiddle：https://jsfiddle.net/svuh0mvj/1/

Answer 1

只需使用scrollTop（）：

$('.close_clear').on('click', function() {
    $(window).scrollTop($('.item_1').offset().top);
})

DEMO

或者使用动画：

$('.close_clear').on('click', function() {
    var body = $("html, body");
    body.stop().animate({scrollTop:$('.item_1').offset().top}, '500');
})

DEMO

要在#nav-header div中向左滚动，请使用：

$('.close_clear').on('click', function() {
    var nav = $("#nav-wrapper");
    nav.animate({scrollLeft: $('.item_1').offset().left}, '500');
})

DEMO

Answer 2

如果你没有使用jquery，或者不想使用它，你可以尝试使用.scrollIntoView（）

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

＆＃34; Element.scrollIntoView（）方法将当前元素滚动到浏览器窗口的可见区域。＆＃34;

虽然现在我们得到的所有不同浏览器都没有以相同的方式实现。

Function IsInArray(ordn As String, vista() As Variant) As Boolean
    IsInArray = (UBound(Filter(vista, ordn)) > -1)
End Function

或者您可以为第一项指定一个ID，或者传递此ID：＆＃39; ul-main_wrapper＆＃39;并将其传递给此示例函数

document.getElementsByClassName('item_1')[0].scrollIntoView();

将为您滚动。

如果您使用jquery，请使用mmm的解决方案

滚动到onClick JavaScript上的元素

2 个答案: