我有一个无序列表，我想滚动到可点击元素答案

【问题标题】：I have an unordered list and i want to scroll to clickable element我有一个无序列表，我想滚动到可点击元素
【发布时间】：2018-06-03 16:59:28
【问题描述】：

此列表在移动视图中是水平的 - 使用 display:inline-block 及其可滚动。

<ul>
  <li>Home<li>
  <li>Accounts<li>
  <li>Contact US<li>
  <li>About us</li>
  <li>Last button</li>
</ul>

你看不到最后一个按钮，因为你需要滚动到它，我想要发生的是当你点击“关于我们”时它会滚动到它的位置，然后你会看到“最后一个按钮”
基本上在 X 轴上滚动到被点击的元素。

【问题讨论】：

见stackoverflow.com/questions/14023765/…

标签： javascript css

【解决方案1】：

您可以使用锚点来“聚焦” div。即：

<ul id="ulList">
  <li>Home<li>
  <li>Accounts<li>
  <li>Contact US<li>
  <li id="about">About us</li>
  <li>Last button</li>
</ul>

然后使用以下javascript：

location.href = "#";
location.href = "#about";

如果需要，您可以使用库检查jQuery.ScrollTo，

已编辑：

var about= document.getElementById('about');
var top = about.offsetTop;

// Now we tell the div to scroll to that position using scrollTop:
document.getElementById('ulList').scrollTop = top;

【讨论】：

问题是整个屏幕都降下来了。
如果答案对您有用，您可以点击答案左侧的选中图标?

【解决方案2】：

尝试使用bootstrap scrolling Nav module：

JavaScript

<script>
    $(".navbar-nav li a").click(function(event) {
        if (!$(this).parent().hasClass('dropdown'))
            $(".navbar-collapse").collapse('hide');
    });   </script>


<ul id="ulList" class="navbar-nav ml-auto" style="z-index:1;">
  <li>Home<li>
  <li>Accounts<li>
  <li>Contact US<li>
  <li id="about">About us</li>
  <li>Last button</li>
</ul>

<div class="about" id="ulList">
    <div class="container">
      test
    </div>
  </div>

【讨论】：