英文:
Need to show active menu from a horizontal scrolling menu list while a scrolling the content to bottom
问题
我有一个位于页面顶部的水平菜单列表，底部有内容部分。页眉菜单有链接到底部内容的特定部分。点击每个菜单时，内容需要平滑滚动到相应的部分。我从网上找到了一些我想要的样式，但没有水平滚动到菜单部分。
这是我需求的一个示例，但顶部部分需要有更多的菜单。而且当我们将内容滚动到底部时，相应的菜单需要滚动到可见区域。
抱歉，我编辑了我的问题，因为我在描述上不太清楚。
请查看两者的活动菜单。
英文:
I have a horizontal list of the menu on the top of the page and the contents at the bottom. The header menu has a link to the particular sections at the bottom content. While clicking on each menu, content needs to scroll to the section with a smooth effect. I have found some styles which I want from online, but it has no horizontal scrolling to the menu section.
https://www.cssscript.com/demo/simple-scrollspy-plugin-javascript/
this is an example of my requirement, but it needs to have more menu on the top part. Also while we scrolling the contents to the bottom, the respective menu needs to scroll the visible area.
Sorry I have edited my question because I wasn't clear on my description.
this is an example while selecting menu2
this is to happen while we scroll the content area to 'section 5'
please see the active menu for both.
答案1
得分: 1
只需在以下 "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) {
// 目标元素 id
var id = jQuery(this).attr('href');
// 目标元素
var $id = jQuery(id);
if ($id.length === 0) {
return;
}
// 防止标准哈希导航（避免在 IE 中闪烁）
e.preventDefault();
// 相对于文档的顶部位置
var pos = $id.offset().top;
// 带动画的顶部滚动
jQuery('body, html').animate({scrollTop: pos});
});
</script>
英文:
Just add below css
html {
scroll-behavior: smooth;
}
Or you can also do with 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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论