Current URL to bootstrap navbar buttons

Question

I have some simple landing page with Bootstrap navbar.

.block1 {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

.block2 {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

.block3 {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#block1">Block one</a></li>
      <li><a href="#block2">Block two</a></li>
      <li><a href="#block3">Block three</a></li>
    </ul>
  </div>
</nav>

<div class="block1">
  <div class="container">
    <div class="row-fluid">
      There is block one
    </div>
  </div>
</div>

<div class="block2">
  <div class="container">
    <div class="row-fluid">
      There is block two
    </div>
  </div>
</div>

<div class="block3">
  <div class="container">
    <div class="row-fluid">
      There is block three
    </div>
  </div>
</div>

I want to add a feature that jumps to the part of the current page when I press the bootstrap navbar buttons. For example: button "Block one" jumps to the <div class="block1">, "Block two" jumps to <div class="block2"> etc. Is there any way to make this? Some JS or something.

Farhad Bagherlo · Accepted Answer · 2017-10-25T20:56:43.033

for use inside the page

Define an id for each part like <div id="block1"... and use it in the <a> tag like <a href="#block1" ...

for external page

use it in the <a> tag like <a href="https://stackoverflow.com/#block1" ...

.block {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#block1">Block one</a></li>
      <li><a href="#block2">Block two</a></li>
      <li><a href="#block3">Block three</a></li>
    </ul>
  </div>
</nav>

<div id="block1" class="block">
  <div class="container">
    <div class="row-fluid">
      There is block one
    </div>
  </div>
</div>

<div id="block2" class="block">
  <div class="container">
    <div class="row-fluid">
      There is block two
    </div>
  </div>
</div>

<div id="block3" class="block">
  <div class="container">
    <div class="row-fluid">
      There is block three
    </div>
  </div>
</div>

Current URL to bootstrap navbar buttons

1 Answers1