skip to Main Content

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 &raquo;</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 &raquo;</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 &raquo;</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>&nbsp;
                        <li><a href="task.html">Task</a></li>&nbsp;
                        <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>&nbsp;
                        <!--Twitter-->
                        <a href="http://www.twitter.com" target="_blank"><button type="button" class="btn btn-tw"><i class="fa fa-twitter"></i></button></a>&nbsp;
                        <!--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>&nbsp;
                        <!--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


  1. 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:

    <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>
    

    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!

    Login or Signup to reply.
  2. 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 the id="about"

    give this id to the about section (i guess the bit with the address?) <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 &raquo;</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 &raquo;</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 &raquo;</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>&nbsp;
    
              <li><a href="task.html">Task</a>
              </li>&nbsp;
              <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>&nbsp;
              <!--Twitter-->
              <a href="http://www.twitter.com" target="_blank">
                <button type="button" class="btn btn-tw"><i class="fa fa-twitter"></i>
                </button>
              </a>&nbsp;
              <!--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>&nbsp;
              <!--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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search