Scroll spy with javascript in Bootstrap

How to highlight the link based on the scroll position or navigate to the content for which the link was clicked using scrollspy with javascript in bootstrap

Scrollspy with javascript

We can also make the links scroll not only using data-attribute but we can also use javascript method to make the links scrollable.

 <style>
        body {
            position: relative;
        }

        #dnf {
            padding-top: 40px;
            height: 300px;
            color: #fff;
            background-color: red;
        }

        #tec {
            padding-top: 40px;
            height: 300px;
            color: #fff;
            background-color: black;
        }

        #itf {
            padding-top: 40px;
            height: 300px;
            color: #fff;
            background-color: green;
        }

        #fun {
            padding-top: 40px;
            height: 300px;
            color: #fff;
            background-color:#34044d;
        }

        #enter {
            padding-top: 30px;
            height: 300px;
            color: #fff;
            background-color: orange;
        }
    </style>
</head>
<body>
    <script>
    $(document).ready(function () {
        $('body').scrollspy({ target: ".navbar"});
    });
    </script>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SN ITFunda</a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#dnf">DotNetFunda</a></li>
                        <li><a href="#tec">TechFunda</a></li>
                        <li><a href="#itf">ITFunda</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">KidsFunda<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#fun">Fun</a></li>
                                <li><a href="#enter">Entertainment</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div id="dnf" class="container-fluid">
        <h1>DotNetFunda</h1>
        <p>DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. We help beginners to become intermediate level professionals and help intermediate level professionals to become an expert. By following our different sections regularly, we hope you will soon become one of the 'Most Valuable' professional and start shining in your career.</p>
    </div>
    <div id="tec" class="container-fluid">
        <h1>TechFunda</h1>
        <p>TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.</p>
    </div>
    <div id="itf" class="container-fluid">
        <h1>ITFunda</h1>
        <p>ITFunda is online tutorial which provides offline training and online training for the people who needs training besides this it also provides sales of the ebboks and materials for the people which are easily understandable with video explanation and provides job support for the people with well experienced person of 20 years in DotNet</p>
    </div>
    <div id="fun" class="container-fluid">
        <h1>KidsFunda</h1>
        <p>Kids Funda provides kids to enjoy , draw painting, learning , watching funny videos, and games, quizzes, stories etc  </p>
    </div>
    <div id="enter" class="container-fluid">
        <h1>Entertainment</h1>
       <p>KidsFunda provides lots of entertainment for the kids to enjoy in learning , watchinng funny videos , games etc</p>
    </div>
</body>

In the above code snippet we have defined the scrollspy with javascript, we have used style to define the scrollspy
In the first line of the body element we have nav element with class value navbar navbar-inverse navbar-fixed-top, defines as navbar-inverse creates the nav element in the black color and navbar fixed-top creates the navbar to the top of the navbar
In the next line of the nav element we have div element with class value container-fluid, we created button with class as navbar-toggle , data-toggle as collapse , data-target as #mynavbar to create button when the screen size is reduced to open the list values and navbar-brand as SN ITFunda
In the next line of the div element we have the div element with class as collapse navbar-collapse and giving the id as mynavbar which calls the nav element in the div section
In the next line of the div section we have the <ul> element with class value as nav navbar-nav to create the list values as DotNetFunda, TechFunda, ITFunda with their id as #dnf, #tec, #itf
In the next line we have created the dropdown for the list value KidsFunda, we have taken the anchor <a> tag to create the dropdown for the value using class as dropdown-toggle and data-toggle as dropdown
In the next line of the dropdown value we have the <ul> element with class value as dropdown-menu and created the list values as Fun and entertainment with their id as #fun and #enter
In the next line we have taken div sections to describe the description of the list values by calling the id of the list values
In the head section of the html we have style sheet and script function to create the scrollspy, in the style sheet we have the list value id with height , padding-top, color and background-color which creates styles according to the given style
In the script function we have the defined the jQuery function as
$(document).ready(function () { - It defines the default function of the jQuery
$('body').scrollspy({ target: ".navbar"}); - It defines as ($) symbol defines the name jQuery
$('body').scrollspy({target:".navbar"}); - It defines to scroll the navbar element in the body section by giving target as .navbar