Question

所以我得到了这个侧边栏，当你点击那里的链接时，页面会发生变化，侧边栏上的活动项目会发生变化，但边栏保持不变。

我注意到在较小的屏幕上，如果您在侧边栏上滚动，如果您点击较低的项目，在下一页中，侧边栏将一直向上滚动，因此您无法在看活动项目。我想这样做，以便当页面准备就绪时滚动转到活动项目。

我环顾四周，但似乎无法让它发挥作用。这是（简化）代码：

<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column" id="sidebar10">
            <li class="nav-item">
                <a class="nav-link collapsed" data-toggle="collapse" id="formularios9" data-parent="#sidebar10" href="#togglecontr1">Formulários</a>
                <div class="collapse" id="togglecontr1">
                    <ul class="nav nav-list">
          <li class="nav-item"><a class="nav-link" id="forms1" href="{{ route('layouts.forms1') }}"><i class="material-icons" id="sidebaricons">check_box</i>Forms1</a></li>      
          <li class="nav-item"><a class="nav-link" id="forms2" href="{{ route('layouts.forms2') }}"><i class="material-icons" id="sidebaricons">check_box</i>Forms2</a></li>
          <li class="nav-item"><a class="nav-link" id="forms3" href="{{ route('layouts.forms3') }}"><i class="material-icons" id="sidebaricons">check_box</i>Forms3</a></li>
                    </ul>
                </div>
            </li>
            <li class="nav-item">
                    <a class="nav-link collapsed" data-toggle="collapse" id="subprocess2" data-parent="#sidebar10" href="#togglecontr2">Sub-processos</a>
                    <div class="collapse" id="togglecontr2">
                        <ul class="nav nav-list">
              <li class="nav-item"><a class="nav-link" id="contrprocess1" href="{{ route('layouts.documentos.matriz1') }}"><i class="material-icons" id="sidebaricons">assignment</i>matriz1</a></li>
              <li class="nav-item"><a class="nav-link" id="contrprocess2" href="{{ route('layouts.documentos.matriz2') }}"><i class="material-icons" id="sidebaricons">assignment</i>matriz2</a></li>
              <li class="nav-item"><a class="nav-link" id="contrprocess3" href="{{ route('layouts.documentos.matriz3') }}"><i class="material-icons" id="sidebaricons">assignment</i>matriz3</a></li>
              <li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li>
                        </ul>
                    </div>
                </li>
        </ul>
    </nav>

至于脚本，我环顾四周，找到了我调整过的这个小脚本，但我似乎无法使其正常工作。

<script>

$(document).ready(function() {

var $scroll = $('.sidebar');

    if($('a').hasClass("active")){
    var $this = $(this);
    $scroll.scrollTop($this.position().top + $scroll.scrollTop())
}

});
</script>

提前致谢！

Answer 1

当您执行：$('a').hasClass("active")时，它会检查文档中的所有<a>。我建议您根据其父级选择<a>。在这里，this不代表a而是window本身。因此，使用您的代码：$this.position().top，会产生以下错误：

Uncaught TypeError: Cannot read property 'defaultView' of undefined

...因为window没有jQuery的方法position()

所以你可以改变你的代码：

var $scroll = $('.sidebar');
$('.nav-item > a').each(function () {
   if ($(this).hasClass('active')) {
      $scroll.scrollTop($(this).position().top + $scroll.scrollTop())
   }
})

现在，这表示<a>

的上下文函数$('.nav-item > a').each()

希望它对你有所帮助。

Answer 2

也许你正在寻找这样的东西（编辑过的JS代码）？

$(document).ready(function() {

    var $scroll = $('.sidebar');
    if ($('a.active').length)
       $scroll.scrollTop($(this).position().top + $scroll.scrollTop())

});

Answer 3

您只需要更改定位'a.active'的方式，试试这个。

$(document).ready(function() {

var $scroll = $('.sidebar');

$(this).scrollTop($('a.active').position().top);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column" id="sidebar10">
            <li class="nav-item">
                <a class="nav-link collapsed" data-toggle="collapse" id="formularios9" data-parent="#sidebar10" href="#togglecontr1">Formulários</a>
                <div class="collapse" id="togglecontr1">
                    <ul class="nav nav-list">
          <li class="nav-item"><a class="nav-link" id="forms1" href="{{ route('layouts.forms1') }}"><i class="material-icons" id="sidebaricons">check_box</i>Forms1</a></li>      
          <li class="nav-item"><a class="nav-link" id="forms2" href="{{ route('layouts.forms2') }}"><i class="material-icons" id="sidebaricons">check_box</i>Forms2</a></li>
          <li class="nav-item"><a class="nav-link" id="forms3" href="{{ route('layouts.forms3') }}"><i class="material-icons" id="sidebaricons">check_box</i>Forms3</a></li>
                    </ul>
                </div>
            </li>
            <li class="nav-item">
                    <a class="nav-link collapsed" data-toggle="collapse" id="subprocess2" data-parent="#sidebar10" href="#togglecontr2">Sub-processos</a>
                    <div class="collapse" id="togglecontr2">
                        <ul class="nav nav-list">
              <li class="nav-item"><a class="nav-link" id="contrprocess1" href="{{ route('layouts.documentos.matriz1') }}"><i class="material-icons" id="sidebaricons">assignment</i>matriz1</a></li>
              <li class="nav-item"><a class="active nav-link" id="contrprocess2" href="{{ route('layouts.documentos.matriz2') }}"><i class="material-icons" id="sidebaricons">assignment</i>matriz2</a></li>
              <li class="nav-item"><a class="nav-link" id="contrprocess3" href="{{ route('layouts.documentos.matriz3') }}"><i class="material-icons" id="sidebaricons">assignment</i>matriz3</a></li>
              <li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li><li class="nav-item"><a class="nav-link" id="contrprocess4" href="{{ route('layouts.documentos.matriz4') }}"><i class="material-icons" id="sidebaricons">assignment</i>4</a></li>
                        </ul>
                    </div>
                </li>
        </ul>
    </nav>

在页面更改时滚动到活动项目

3 个答案: