Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/87.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何在单击固定标题中的相应链接时获取节_Html_Css - Fatal编程技术网

Html 如何在单击固定标题中的相应链接时获取节

Html 如何在单击固定标题中的相应链接时获取节,html,css,Html,Css,场景:当我点击固定标题中的title1链接时,它应该显示title1节,当我点击title2链接时,它应该在顶部显示title2节,就像这样..但在这里它显示在页面顶部,但在标题后面,所以它不可见 我已附上我尝试的代码,请帮助解决此问题 菜单{ 身高:165px; 位置:固定; 背景颜色:浅灰色; 边缘顶部:-113px; 宽度:1090px; } #菜单中心{ 利润率:35px 0 0px 115px } #菜单中心{ 列表样式:无; 利润率:0.30px 0.0; 显示:内联; } .化身

场景:当我点击固定标题中的title1链接时,它应该显示title1节,当我点击title2链接时,它应该在顶部显示title2节,就像这样..但在这里它显示在页面顶部,但在标题后面,所以它不可见

我已附上我尝试的代码,请帮助解决此问题

菜单{
身高:165px;
位置:固定;
背景颜色:浅灰色;
边缘顶部:-113px;
宽度:1090px;
}
#菜单中心{
利润率:35px 0 0px 115px
}
#菜单中心{
列表样式:无;
利润率:0.30px 0.0;
显示:内联;
}
.化身1{
背景#ED7D31;
边界半径:50%;
显示:内联块;
填充:10px;
}
.化身2{
背景#a5a5;
边界半径:50%;
显示:内联块;
填充:10px;
}
.阿凡达3{
背景:#FFC000;
边界半径:50%;
显示:内联块;
填充:10px;
}
.化身4{
背景#5b9bd5;
边界半径:50%;
显示:内联块;
填充:10px;
}
.阿凡达5{
背景:#70AD47;
边界半径:50%;
显示:内联块;
填充:10px;
}
分部项目{
垂直对齐:顶部;
显示:内联块;
文本对齐:居中;
宽度:120px;
}
.标题{
显示:块;
颜色:#ffffff;
}
#标题1{
身高:100%;
宽度:100%;
垫面:165px;
}
#标题2{
身高:100%;
宽度:100%;
填充顶部:25px;
}
#标题3{
身高:100%;
宽度:100%;
填充顶部:25px;
}
#标题4{
身高:100%;
宽度:100%;
填充顶部:25px;
}
#标题5{
身高:100%;
宽度:100%;
填充顶部:280px;
}
.垂直{
左边框:190px实心#5786c5;
左边距:900px;
利润上限:-1620px;
高度:1620px;
} 
.项目-01{
右边距:253px;
字体大小:16px;
线高:1.8;
}

标题
标题1
    Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本
标题2
    Lorem Ipsum只是印刷的虚拟文本
标题3
    Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是业界标准的虚拟文本,当时一家不知名的打印机在打印时使用了一个厨房。
标题4
    Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本
标题5 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本。

当一个不知名的印刷商拿着一个铅字厨房,把它拼凑成一本铅字样本书

    Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本 Lorem Ipsum只是一个虚拟文本

可以通过使用javascript和jquery库来实现

  • 将jquery库导入到代码中
  • 在脚本标记中使用以下代码

您需要在该部分添加与菜单高度相等的填充物。@dhananjyan感谢您的回复。而且很有效。但我想在SharePoint页面上实现这一点,jquery库的导入不起作用。没有javascript有什么方法可以做到这一点吗?@Ann它只能由javascript完成。我想这可能对你有帮助。
$('#menu-center ul').find('a').click(function(e){

        e.preventDefault();

        var menuHeight = $('.menu').height();
        var $href = $(this).attr('href');
        var $anchor = $($href).offset(); // Get position of section.

        //Scroll particular section to top with adjusting menu height.
        window.scrollTo($anchor.left,$anchor.top- menuHeight);

        return false;

    });