Question

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

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

你无法看到最后一个按钮，因为你需要滚动到它，我想要发生的是当你点击＆＃34;关于美国＆＃34;它滚动到它的位置然后你会看到＆＃34;最后一个按钮＆＃34;
基本上在X轴上滚动到单击的元素。

Answer 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;

Answer 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>

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

2 个答案: