我希望网页在点击“阻止级别”按钮时向下滚动，如下面的代码段所示。 Button也应在两侧（大写标题的左侧和右侧）显示向下箭头符号
body{
padding:0px;
z-index:0;
}
.navbar-inverse {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #fff;
background: #1A237E;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #fff;
background: #1A237E;
}
footer {
height: 400px;
background: #eee;
}
.list-unstyled {
display: inline-flex;
}
h5 {
text-transform: uppercase;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 20px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 0px;
padding: 10px 16px;
text-transform: uppercase;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Task List</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="./font-awesome-4.7.0/css/font-awesome.css">
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./bootstrap-social-gh-pages/bootstrap-social.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="task.html">Tasks</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row">
<div>
<h1>Want to be the next Elon Musk, Bill Gates or Mark Zuckerburg?</h1>
<p style="padding:40px;"></p>
<button type="button" class="btn btn-primary btn-lg btn-block">Below are your tasks</button>
</div>
</div>
</div>
</header>
<div class="container">
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
<li><a href="task.html">Task</a></li>
<li><a href="about.html">About</a></li>
</ol>
</div>
<div class="container">
<div class="row">
<div class="well well-lg">
<p style="padding:20px;"></p>
<h2 align=center>Want to be the next Elon?</h2>
<h3>Pick your task</h3>
<ul>
<li><a href="task.html">Task 1</a></li>
<li><a href="task.html">Task 2</a></li>
<li><a href="task.html">Task 3</a></li>
</ul>
<p><a href="https://en.wikipedia.org/wiki/Energy" target="_blank">More »</a></p>
</div>
</div>
<div class="row">
<div class="well well-lg">
<p style="padding:20px;"></p>
<h2 align=center>Want to be the next Bill?</h2>
<h3>Pick your task</h3>
<ul>
<li><a href="task.html">Task 1</a></li>
<li><a href="task.html">Task 2</a></li>
<li><a href="task.html">Task 3</a></li>
</ul>
<p><a href="#">More »</a></p>
</div>
</div>
<div class="row">
<div class="well well-lg">
<p style="padding:20px;"></p>
<h2 align=center>Want to be the next Mark?</h2>
<h3>Pick your task</h3>
<ul>
<li><a href="task.html">Task 1</a></li>
<li><a href="task.html">Task 2</a></li>
<li><a href="task.html">Task 3</a></li>
</ul>
<p><a href="#">More »</a></p>
</div>
</div>
</div>
<footer>
<div class="container">
<div>
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="index.html">Home</a></li>
<li><a href="task.html">Task</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div>
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:plantsfortrees@gmail.com">plantsfortrees@gmail.com</a>
</address>
</div>
<hr>
<div>
<div class="nav navbar-nav" style="padding: 40px 10px;">
<!--Facebook-->
<a href="http://www.facebook.com" target="_blank"><button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i></button></a>
<!--Twitter-->
<a href="http://www.twitter.com" target="_blank"><button type="button" class="btn btn-tw"><i class="fa fa-twitter"></i></button></a>
<!--Google +-->
<a href="http://www.googleplus.com" target="_blank"><button type="button" class="btn btn-gplus"><i class="fa fa-google-plus"></i></button></a>
<!--Linkedin-->
<a href="http://www.linkedin.com" target="_blank"><button type="button" class="btn btn-li"><i class="fa fa-linkedin"></i></button></a>
</div>
</div>
<div>
<p style="padding:10px;"></p>
<p align=center>© Copyright 2016 The Task Website </p>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：0)
您可以在按钮代码上使用以下内容：<a href="#top">Top</a>以及应使用标记ID <h2 id="top">Place You Want</h2>显示的部分。
编码就像你可以在同一个html页面上创建链接。
P.S。：关于箭头，我不知道该怎么做。遗憾。
修改
示例：
<body>
<div>
<a href="#placeIwant">This is my button.</a>
</div>
<div>
<h1 id="placeIwant">Thats the header I want to show when I click the button</h1>
</div>
</body>
使用id，当您单击按钮时，它将转到它所在的位置。在示例中，该按钮将您引导至id="placeIwant"，在我们的示例中为标题。您可以在代码上使用相同的逻辑。希望有所帮助！
答案 1 :(得分：0)
这里我添加了带有默认bootstrap glyphicons的箭头：http://getbootstrap.com/components/
并使用<a href="#about">将使用id="about"
将此ID提供给about部分（我猜这个地址的位数？）<div id="about">
body {
padding: 0px;
z-index: 0;
}
.nav li a {
text-align:center;
}
.navbar-inverse {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #fff;
background: #1A237E;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #fff;
background: #1A237E;
}
footer {
height: 400px;
background: #eee;
}
.list-unstyled {
display: inline-flex;
}
h5 {
text-transform: uppercase;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 20px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 0px;
padding: 10px 16px;
text-transform: uppercase;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Task List</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="./font-awesome-4.7.0/css/font-awesome.css">
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./bootstrap-social-gh-pages/bootstrap-social.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a>
</li>
<li><a href="task.html">Tasks</a>
</li>
<li><a href="#about" data-toggle="collapse" data-target="#navbar"><span class="glyphicon glyphicon-chevron-down pull-left" aria-hidden="true"></span>About<span class="glyphicon glyphicon-chevron-down pull-right" aria-hidden="true"></span></a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row">
<div>
<h1>Want to be the next Elon Musk, Bill Gates or Mark Zuckerburg?</h1>
<p style="padding:40px;"></p>
<button type="button" class="btn btn-primary btn-lg btn-block">Below are your tasks</button>
</div>
</div>
</div>
</header>
<div class="container">
<ol class="breadcrumb">
<li><a href="index.html">Home</a>
</li>
<li><a href="task.html">Task</a>
</li>
<li><a href="about.html">About</a>
</li>
</ol>
</div>
<div class="container">
<div class="row">
<div class="well well-lg">
<p style="padding:20px;"></p>
<h2 align=center>Want to be the next Elon?</h2>
<h3>Pick your task</h3>
<ul>
<li><a href="task.html">Task 1</a>
</li>
<li><a href="task.html">Task 2</a>
</li>
<li><a href="task.html">Task 3</a>
</li>
</ul>
<p><a href="https://en.wikipedia.org/wiki/Energy" target="_blank">More »</a>
</p>
</div>
</div>
<div class="row">
<div class="well well-lg">
<p style="padding:20px;"></p>
<h2 align=center>Want to be the next Bill?</h2>
<h3>Pick your task</h3>
<ul>
<li><a href="task.html">Task 1</a>
</li>
<li><a href="task.html">Task 2</a>
</li>
<li><a href="task.html">Task 3</a>
</li>
</ul>
<p><a href="#">More »</a>
</p>
</div>
</div>
<div class="row">
<div class="well well-lg">
<p style="padding:20px;"></p>
<h2 align=center>Want to be the next Mark?</h2>
<h3>Pick your task</h3>
<ul>
<li><a href="task.html">Task 1</a>
</li>
<li><a href="task.html">Task 2</a>
</li>
<li><a href="task.html">Task 3</a>
</li>
</ul>
<p><a href="#">More »</a>
</p>
</div>
</div>
</div>
<footer>
<div class="container">
<div id="about">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="index.html">Home</a>
</li>
<li><a href="task.html">Task</a>
</li>
<li><a href="about.html">About</a>
</li>
</ul>
</div>
<div>
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:plantsfortrees@gmail.com">plantsfortrees@gmail.com</a>
</address>
</div>
<hr>
<div>
<div class="nav navbar-nav" style="padding: 40px 10px;">
<!--Facebook-->
<a href="http://www.facebook.com" target="_blank">
<button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i>
</button>
</a>
<!--Twitter-->
<a href="http://www.twitter.com" target="_blank">
<button type="button" class="btn btn-tw"><i class="fa fa-twitter"></i>
</button>
</a>
<!--Google +-->
<a href="http://www.googleplus.com" target="_blank">
<button type="button" class="btn btn-gplus"><i class="fa fa-google-plus"></i>
</button>
</a>
<!--Linkedin-->
<a href="http://www.linkedin.com" target="_blank">
<button type="button" class="btn btn-li"><i class="fa fa-linkedin"></i>
</button>
</a>
</div>
</div>
<div>
<p style="padding:10px;"></p>
<p align=center>© Copyright 2016 The Task Website</p>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>