gpt4 book ai didi

javascript - 在页面更改时滚动到事件元素

转载 作者:太空宇宙 更新时间:2023-11-04 07:28:54 25 4
gpt4 key购买 nike

所以我得到了这个侧边栏,当你点击那里的链接时,页面会改变,侧边栏上的事件元素也会改变,但侧边栏保持不变。

我注意到,在较小的屏幕上,当边栏上有滚动条时,如果您单击下方的元素,在下一页中,边栏将一直向上滚动,因此您看不到事件元素。我想让它在页面准备就绪时滚动到事件元素。

我环顾四周,但似乎无法让它发挥作用。这是(简化的)代码:

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

提前致谢!

最佳答案

当你这样做时:$('a').hasClass("active") , 它会检查所有 <a>在文档中。我建议你选择<a>例如,根据其父级。在这里,this不代表 a 而是 window本身。所以你的代码:$this.position().top ,它会产生以下错误:

Uncaught TypeError: Cannot read property 'defaultView' of undefined

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

所以你可以这样修改你的代码:

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

现在这代表<a>进入 $('.nav-item > a').each() 的上下文函数

希望对你有帮助。

关于javascript - 在页面更改时滚动到事件元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49629635/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com