单击导航栏时滚动到页面的一部分 [英] Scroll to a section of the page when clicking on the navbar

问题描述

我一直在制作我的第一个网站 - 一个单页网站，其中包含包含内容的不同部分.我创建了一个漂亮的导航栏，并一直在网上搜索以尝试找到一种方法来为其添加功能.

这是导航栏的标记:

<div class="容器"><div class="title"><h3>斯图尔特·埃霍夫</h3>
<img src="images/shield.svg"></a><ul class="菜单"><li><a href="#home">首页</a></li><li><a href="#about">关于</a></li><li><a href="#myskills">我的技能</a></li><li><a href="#mywork">我的作品</a></li><li class="border"><a href="#">联系我</a></li>
<a href="#" class="dropdown-toggle">更多<b class="caret"></b></a><ul class="下拉菜单"><li><a href="#exploration">探索</a></li><li><a href="#music">音乐</a></li>

);

提前致谢.

解决方案

我在 github 上查看了您的页面，并在您的内容中添加了 ID.例如，如果您这样做:那么您将转到 id="id" 的容器.

例如我添加的页面:

<li><a href="#myskills">我的技能</a></li>

使用 HTML

这是完整的 HTML.

//更多菜单下拉切换功能var main = 函数(){$('.dropdown-toggle').click(function() {$('.下拉菜单').toggle();});//下一个箭头功能$('.arrow-next').click(function() {var currentSlide = $('.active-slide');var nextSlide = currentSlide.next();var currentDot = $('.active-dot');var nextDot = currentDot.next();如果(nextSlide.length == 0){nextSlide = $('.slide').first();nextDot = $('.dot').first();}currentSlide.fadeOut(600).removeClass('active-slide');nextSlide.fadeIn(600).addClass('active-slide');currentDot.removeClass('active-dot');nextDot.addClass('active-dot');});//上一个箭头点击功能$('.arrow-prev').click(function() {var currentSlide = $('.active-slide');var prevSlide = currentSlide.prev();var currentDot = $('.active-dot');var prevDot = currentDot.prev();如果(prevSlide.length == 0){prevSlide = $('.slide').last();prevDot = $('.dot').last();}currentSlide.fadeOut(600).removeClass('active-slide');prevSlide.fadeIn(600).addClass('active-slide');currentDot.removeClass('active-dot');prevDot.addClass('active-dot');});};$(document).ready(main);

/* 一般 */.容器 {宽度:960px；}.下划线{边框底部:3px 实心 #7FCCE5；}.underlinegrey {边框底部:3px 实心 #808080；}.underlineblack {边框底部:3px 实心 #313131;}.underlinethin {边框底部:1px 实心 #7FCCE5；}.circle-icon {宽度:80px；高度:80px；文本对齐:居中；4 行高:80px；字体大小 2.1em；边框半径:40px；保证金:自动；颜色:#aaa;背景色:#ddd;}.glyphicon {位置:相对；显示:内联块；font-family: 'Glyphicons Halflings';字体样式:正常；字体粗细:400；字体大小:35px；}.circle-icon .glyphicon {顶部:0；行高:80px；文本对齐:居中；}/* 导航栏 */.nav {背景颜色:rgba(255, 255, 255, 0.95);边框底部:1px 实心 #ddd;字体系列:'Oswald'，无衬线；字体粗细:300；字体大小:17px；填充:5px；位置:固定；顶部:0；左:0；z-索引:9999；宽度:100%；}.nav .title {位置:固定；左:100px；顶部:-10px；}.logo 图标 {位置:固定；左:500px；顶部:8px；}/* 菜单 */.nav .menu {浮动:对；列表样式:无；边距顶部:5px；}.menu >李{显示:内联；padding-left: 30px;padding-right: 30px;}.menu a {颜色:#898989；}.menu .border a {边框:1px 实心 #7FCCE5；填充:15px；填充顶部:2px；填充底部:2px；}/* 落下 */.下拉式菜单 {字体大小:16px；边距顶部:5px；最小宽度:105px；z-索引:999；}.dropdown-menu li a {颜色:#898989；填充:6px 20px；字体粗细:300；}/* 大屏幕 */.jumbotron {背景图片:url('http://p1.pichost.me/i/58/1822942.jpg');高度:1020px；背景重复:不重复；背景尺寸:封面；位置:初始；}.jumbotron .container {位置:相对；顶部:250px；}.jumbotron h1 {颜色:#fff;字体大小:80px；字体系列:'Oswald'，无衬线；字体粗细:300；文本对齐:居中；填充:20px；文本阴影:0px 0px 3px #000;}.jumbotron p {颜色:#fff;字体大小:48px；字体系列:'Oswald'，无衬线；字体粗细:300；文本对齐:居中；填充:20px；文本阴影:0px 0px 3px #000;}.jumbotron h3 {颜色:#fff;字体大小:80px；字体系列:'Oswald'，无衬线；字体粗细:300；文本对齐:居中；填充:20px；文本阴影:0px 0px 3px #000;}.btn {显示:内联块；填充:4px 14px；底边距:0px；字体大小:13px；文本对齐:居中；垂直对齐:中间；光标:指针；边框半径:1px；边框颜色:#f7f6f6；行高:20px；字体粗细:粗体；颜色:#f7f6f6；背景色:透明；位置:相对；顶部:50px；左:340px；}.btn:悬停{背景图像:无；背景色:#808080；颜色:#f7f6f6；}/* 关于我 */.关于 {高度:600px；背景色:#ffffff；}.about .container {顶部:35px；位置:相对；}.关于 h3 {颜色:#313131；字体大小:40px；字体系列:'Oswald'，无衬线；字体粗细:300；填充;20px;文本对齐:居中；}.关于 p {位置:相对；顶部:20px；颜色:#313131；字体大小:20px；字体系列:'Oswald'，无衬线；字体粗细:300；填充:30px；行高:210%；}/* 我的技能  */.我的技能 {高度:880px；背景色:#F7F6F6；}.myskills .container {宽度:1500px；位置:相对；顶部:35px；}.myskills .row {位置:相对；文本对齐:居中；顶部:80px；填充底部:50px；}.myskills h3 {颜色:#808080；字体大小:40px；字体系列:'Oswald'，无衬线；字体粗细:300；文本对齐:居中；}.myskills h1 {颜色:#808080；字体大小:25px；字体系列:'Oswald'，无衬线；字体粗细:400；文本对齐:居中；填充底部:50px；}.myskills p {颜色:#808080；字体大小:20px；字体系列:'Oswald'，无衬线；字体粗细:300；填充;20px;文本对齐:居中；行高:200%；}.glyphicon-心{红色;}.glyphicon-图片{颜色为橙色;}.glyphicon-云{白颜色;}.glyphicon 相机 {颜色:黑色;}.glyphicon-book {颜色:深紫色；}.glyphicon-音乐 {颜色:橙红色；}/* 我的工作 */.我的工作 {高度:400px；背景色:#FFFFFF；}.mywork .container {位置:相对；顶部:35px；}.mywork h3 {颜色:#313131；字体大小:40px；字体系列:'Oswald'，无衬线；字体粗细:300；填充底部:40px；文本对齐:居中；}.mywork h1 {颜色:#313131；字体大小:30px；字体系列:'Oswald'，无衬线；字体粗细:300；填充底部:20px；文本对齐:居中；}.mywork p {颜色:#313131；字体大小:20px；字体系列:'Oswald'，无衬线；字体粗细:300；填充:50px；文本对齐:居中；}/* 接触 */.接触 {高度:330px；背景颜色:#313131；}.contact .container {位置:相对；顶部:35px；}.联系 .row {宽度:300px；位置:相对；左:325px；文本对齐:居中；顶部:30px；填充底部:40px；}.联系 h3 {颜色:#F7F6F6；字体大小:40px；字体系列:'Oswald'，无衬线；字体粗细:300；填充;20px;文本对齐:居中；}.联系 h1 {颜色:#808080；字体大小:20px；字体系列:'Oswald'，无衬线；字体粗细:300；填充:10px；文本对齐:居中；}. 联系 p {颜色:#F7F6F6；字体大小:16px；字体系列:'Oswald'，无衬线；字体粗细:300；填充底部:15px；文本对齐:居中；}.联系{颜色:#7FCCE5；}/* 探索 */.探索{高度:1100px；背景色:#ffffff；}.探索 .container {位置:相对；顶部:35px；宽度:1200px；}.探索 h3 {颜色:#313131；字体大小:40px；字体系列:'Oswald'，无衬线；字体粗细:300；填充底部:20px；文本对齐:居中；}.探索 p {颜色:#313131；字体大小:20px；字体系列:'Oswald'，无衬线；字体粗细:300；文本对齐:居中；}.slider {位置:相对；顶部:50px；宽度:100%；高度:800px；}.滑动 {显示:无；位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；}.active-slide {显示:块；}/* 滑动功能 */.slide-feature {文本对齐:居中；高度:800px；}.slide-feature-1 {背景图片:url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11036160_10152854777396270_5157414753497878003_o.jpg');背景位置:中心；}.slide-feature-2 {背景图片:url('https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xta1/t31.0-8/11218515_10152909922431270_7749144937209461633'jpg);背景位置:中心；}.slide-feature-3 {背景图片:url('https://scontent-lhr.xx.fbcdn.net/hphotos-xpa1/t31.0-8/11187795_10152891725491270_1769195601160147349_o.jpg');背景位置:底部；}.slide-feature-4 {背景图片:url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11154672_10152854784061270_3532862830070230799_o.jpg');背景位置:中心；}.slide-feature-5 {背景图片:url('https://scontent-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/11164749_10152909922426270_8192461025609874418_o.jpg');背景位置:中心；}.slide-feature img {边距顶部:112px；底边距:28px；}.slider-nav {文本对齐:居中；边距顶部:20px；}.arrow-prev {右边距:45px；显示:内联块；垂直对齐:顶部；边距顶部:9px；位置:相对；顶部:40px；}.arrow-下一个{左边距:45px；显示:内联块；垂直对齐:顶部；边距顶部:9px；位置:相对；顶部:40px；}.slider-dots {列表样式:无；显示:内联块；填充左:0;底边距:0；位置:相对；顶部:40px；}.slider-dots li {颜色:#bbbcbc；显示:内联；字体大小:30px；右边距:5px；}.slider-dots li.active-dot {颜色:#7FCCE5；}/*音乐*/.音乐 {高度:1200px；背景颜色:#313131；}.music .container {位置:相对；顶部:35px；宽度:1500px；}.音乐 h3 {颜色:#F7F6F6；字体大小:40px；字体系列:'Oswald'，无衬线；字体粗细:300；填充底部:;40 像素；文本对齐:居中；}.音乐 h1 {颜色:#808080；字体大小:20px；字体系列:'Oswald'，无衬线；字体粗细:300；填充:30px；文本对齐:居中；}.音乐 p {颜色:#F7F6F6；字体大小:16px；字体系列:'Oswald'，无衬线；字体粗细:300；填充-;文本对齐:居中；}iframe {位置:相对；顶部:10px；边距:20px；}/*页脚*/.页脚{高度:200px；背景色:#F7F6F6；}.页脚 h1 {颜色:#808080；字体大小:20px；字体系列:'Oswald'，无衬线；字体粗细:300；文本对齐:居中；填充底部:50px；位置:相对；顶部:35px；}.页脚 p {颜色:#808080；字体大小:16px；字体系列:'Oswald'，无衬线；字体粗细:300；填充;20px;文本对齐:居中；行高:200%；}

<头><link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="样式表"><link href="https://raw.githubusercontent.com/Ardiaz/Stewart-Ehoff.com/master/style.css" rel="stylesheet"><script src="http://code.jquery.com/jquery-latest.js"></script><身体><!-- 导航栏--><div class="nav"><div class="容器"><div class="title"><h3>斯图尔特·埃霍夫</h3>

<img src="https://raw.githubusercontent.com/Ardiaz/Stewart-Ehoff.com/master/images/shield.svg"></a><ul class="菜单"><li><a href="#">首页</a><li><a href="#about">关于</a><li><a href="#myskills">我的技能</a><li><a href="#mywork">我的作品</a><li class="border"><a href="#contactme">联系我</a>

<a href="#" class="dropdown-toggle">更多<b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">探索</a>

<li><a href="#">音乐</a>

<!--JUMBOTRON 从这里开始--><div class="jumbotron"><div class="容器"><h1>你好，世界.</h1><p>我的名字是<b>斯图尔特·埃霍夫</b>我是一名自学成才的网络开发人员.</p><h3>让我们一起工作.<button type="button" class="btn">告诉我更多</button><button type="button" class="btn">RESUME</button>