Question posted in 
I want the Webpage to scroll down upon clicking the Block Level button as shown in the snippet below.
Also the Button should display a Down arrow symbol on both the sides (left and right of the uppercase heading)
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:[email protected]">[email protected]</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>
2
Answers
You can use on the button code the following:
<a href="#top">Top</a>and at the section where it should show with the tag id:<h2 id="top">Place You Want</h2>.Coding like that you can create links on the same html page.
P.S.: About the arrow, i don’t know how to do. Sorry.
Edit:
Example:
Using the id, when you click the button, it will go to where it is. In te example, the button directs you to
id="placeIwant", that in our case is the Header . You can use the same logic on your code. Hope help!Here I have added the arrows with the default bootstrap glyphicons: http://getbootstrap.com/components/
and using
<a href="#about">will link to the part of your page with theid="about"give this id to the about section (i guess the bit with the address?)
<div id="about">