Bootstrap Snippet Anchor tag Animation Linking using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<ul class="nav navbar-nav">
    <li><a class="anchorLink" href="#one">Red</a></li>
    <li><a class="anchorLink" href="#two">Green</a></li>
</ul>
<section id="one">
    <div class="container">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 
     </div>
</section>
<section id="two">
    <div class="container">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 
     </div>
</section>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul.nav {
    width:100%;
    background:#000;
    position:fixed;
}
ul.nav li {
    float:left;
    display:inline-block;
}
ul.nav li a {
    float:left;
    display:inline-block;
}
section {
    height:500px;
}
#one {background:#f33;}
#two {background:green;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
$(document).ready(function(){       
            $(function() {
                // grab the initial top offset of the navigation 
                var sticky_navigation_offset_top = $('#site-header').offset().top;
                
                // our function that decides weather the navigation bar should have "fixed" css position or not.
                var sticky_navigation = function(){
                var scroll_top = $(window).scrollTop(); // our current vertical position from the top
                // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
                var header_height = $('#site-header').height() + 'px';
                if ((scroll_top > sticky_navigation_offset_top)||(scroll_top > 1)) {
                    $('#site-header').addClass('fixed-header');
                    //$('body').css({ 'padding-top': header_height});
                } 
                else {
                    $('#site-header').removeClass('fixed-header');
                    //$('body').css({ 'padding-top': '0px'});
                }   
                
                /*var width = $(window).width();
                if(width < 767) {
                    $('.navbar').css({ 'position': 'static', 'margin-bottom':'0px', 'background-color':'#000', 'border-width':'1px' });
                    $('body').css({ 'padding-top':'0px'});
                }
                */
            };
            // run our function on load
            sticky_navigation();
            // and run it again every time you scroll
            $(window).scroll(function() {
                 sticky_navigation();
            });
          });
         
          
         });
         
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Anchor tag Animation Linking"
Bootstrap 4.1.1 Snippet by naimansari

Related: See More

Questions / Comments:

"Anchor tag Animation Linking" Bootstrap 4.1.1 Snippet by naimansari

Related: See More

Questions / Comments:

"Anchor tag Animation Linking"
Bootstrap 4.1.1 Snippet by naimansari