我在页面顶部有一个水平菜单列表,在底部有一个内容列表。标题菜单有一个指向底部内容特定部分的链接。单击每个菜单时,内容需要滚动到具有平滑效果的部分。我从网上找到了一些我想要的样式,但它没有水平滚动到菜单部分。
https://www.cssscript.com/demo/simple-scrollspy-plugin-javascript/
这是我的要求的一个例子,但它需要在顶部有更多的菜单。此外,当我们将内容滚动到底部时,相应的菜单需要滚动可见区域。
抱歉,我编辑了我的问题,因为我的描述不清楚。
this is an example while selecting menu2
this is to happen while we scroll the content area to 'section 5'
请查看两者的事件菜单。
最佳答案
只需添加下面的css
html {
scroll-behavior: smooth;
}
或者你也可以使用jQuery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
jQuery(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = jQuery(this).attr('href');
// target element
var $id = jQuery(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $id.offset().top;
// animated top scrolling
jQuery('body, html').animate({scrollTop: pos});
});
</script>
关于javascript - 需要在将内容滚动到底部时从水平滚动菜单列表显示事件菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59574601/