Bootstrap Snippet SMooth inline href transition with gap using HTML Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2 class="text-center">Smooth inline href</h2>
        
        <div class="col-md-12 list-online">
            
            <a class="btn btn-default" href="#inline1">link1</a>
               <a class="btn btn-info" href="#inline2">link2</a>
                  <a class="btn btn-warning" href="#inline3">link3</a>
                     <a class="btn btn-danger" href="#inline4">link4</a>
                        <a class="btn btn-success" href="#inline5">link5</a>
    
    
    
    
    
    <div id="inline1">
        <h1>link1</h1>
        <p>THis is test  texts</p>
        <p>THis is test  texts</p>
        <p>THis is test  texts</p>
        <p>THis is test  texts</p>
        <p>THis is test  texts</p>
        <p>THis is test  texts</p>
        <p>THis is test  texts</p>
        <p>THis is test  texts</p>
        
    </div>
    
    
    
    <div id="inline2">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
function scrollNav() {
  $('.list-online a, ').click(function(){  
    //Toggle Class
   
    //Animate
    $('html, body').stop().animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 160
    }, 400);
    return false;
  });
  $('.scrollTop a').scrollTop();
}
scrollNav();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"SMooth inline href transition with gap"
Bootstrap 3.3.0 Snippet by sunilkaranjit

Related: See More

Questions / Comments:

"SMooth inline href transition with gap" Bootstrap 3.3.0 Snippet by sunilkaranjit

Related: See More

Questions / Comments:

"SMooth inline href transition with gap"
Bootstrap 3.3.0 Snippet by sunilkaranjit