滚动到一个元素 onClick JavaScript

Scroll to a element onClick JavaScript

本文关键字：一个 元素 onClick JavaScript 滚动      更新时间：2023-09-26

所以我的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;
}

on单击列表中返回的最后一个项目，我正在尝试让列表滚动回第一个项目。但找不到任何有用的东西。

编辑：

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

只需使用 scrollTop（）：

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

演示

或者使用动画：

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

演示

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

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

演示

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

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

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

尽管这在我们这些天获得的所有不同浏览器中的实现方式并不相同。

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

你可以为第一项分配一个 id，或者传递这个 id："ul-main_wrapper"并将其传递给此示例函数

function scrollToAnchor(anchor) {
   var scrollLocation = document.location.toString().split('#')[0];
   document.location = scrollLocation + '#' + anchor;
}

这将为您进行滚动。

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

相关文章：