When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

After experimenting with Data-spy to change the active anchor while scrolling, I encountered an issue. Upon scrolling back up to the top of the page from the about section, the "Home" anchor failed to re-activate. How can this be fixed?

I attempted to remove the "active" class from the "Home" link and played around with ID's, but unfortunately, it didn't work. Any assistance on this matter would be greatly appreciated.

Link to Code Example

<head>
    <title>The James Baldwin School</title>
    <link href="Framework/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="Main.css" rel="stylesheet" type="text/css">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="0">
    <header>
      <div class="navbar-wrapper">
        <div class="container">
          <div id="navtop" class="navbar navbar-default navbar-fixed-top">

            <div class="navbar-header">
               <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </a>
               <a class="navbar-brand" href="#">The James Baldwin School</a>
            </div>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">

                    <li><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#faculty">Faculty</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parents <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Students <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Teachers <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>

                    </ul>
                </div><!--- /.navbar-collapse collapse --->

                </div><!--- /#navtop --->
            </div><!-- /.container -->
        </div><!-- /.navbar wrapper -->
    </header>

    <a href="http://en.wikipedia.org/wiki/James_Baldwin" target="_blank"><img src="http://i.huffpost.com/gen/1757925/thumbs/o-JAMES-BALDWIN-facebook.jpg" style="width:100%"></a>
    <div class="image-caption">

    </div>

    <div class="jumbotron" id="about">
      <div class="container">
          <div class="text-center">
            <h1>The James Baldwin School</h1>
            <h2>A School For Expeditionary Learning.</h2>
            <p>It is our mission to provide a philosophical and practical education for all students, an education that features creativity and inquiry, encourages habitual reading and productivity, as well as self-reflection and original thought.  We agree with Socrates that the “unexamined life is not worth living,” and it is our desire to prepare students to live thoughtful and meaningful lives. We are committed to inspiring the love of learning in our students.</p>
            <p>It is our mission, as well, at the James Baldwin School, to provide a haven for students who have previously experienced school as unresponsive to their needs as individuals.  We wish for all students to find their voice and to speak knowledgeably and thoughtfully on issues that concern their school, their world.  We aid students in this endeavor by personalizing our learning situations, by democratizing and humanizing the school environment, and by creating a “talking culture,” an atmosphere of informal intellectual discourse among students and faculty.</p>
            <p>Democratizing the school would be impossible without our Core Values. Our core values help students acquire the important skills needed to continue their journey through life. Most importantly, our core values maintain safety  and democracy for students and faculty.</p>
            <a class="btn btn-large btn-danger" href="#">Learn more about Core Values</a>
          </div>    
      </div>        
    </div>        
    <div class="container marketing" id="faculty">

      <div class="row">
        <div class="col-md-4 text-center">
          <img class="img-circle" src="http://placehold.it/140x140">
          <h2>Brady Smith</h2>
          <p>Principal Co-Director</p>
          <p><a class="btn btn-default" href="#">View details</a></p>
        </div>

        <div class="col-md-4 text-center">
          <img class="img-circle" src="http://placehold.it/140x140">
          <h2>Josh Heisler</h2>
          <p>Teacher Co-Director</p>
          <p><a class="btn btn-default" href="#">View details</a></p>
        </div>

        <div class="col-md-4 text-center">
          <img class="img-circle" src="http://placehold.it/140x140">
          <h2>Christine Olsen</h2>
          <p>Admissions</p>
          <p><a class="btn btn-default" href="#">View details</a></p>
        </div>

                    <div class="col-md-4 text-center">
          <img class="img-circle" src="http://placehold.it/140x140">
          <h2>Brady Smith</h2>
          <p>Principal Co-Director</p>
          <p><a class="btn btn-default" href="#">View details</a></p>
        </div>

        <div class="col-md-4 text-center">
          <img class="img-circle" src="http://placehold.it/140x140">
          <h2>Josh Heisler</h2>
          <p>Teacher Co-Director</p>
          <p><a class="btn btn-default" href="#">View details</a></p>
        </div>

        <div class="col-md-4 text-center">
          <img class="img-circle" src="http://placehold.it/140x140">
          <h2>Christine Olsen</h2>
          <p>Admissions</p>
          <p><a class="btn btn-default" href="#">View details</a></p>
        </div>
      </div><!-- /.row -->

    <div id="team-btn">
      <div class="text-center">
        <a class="btn btn-large btn-danger" href="#">See the rest of Our Team</a>
      </div><!--- /.text-center --->
    </div><!--- /.team-btn --->

    </div><!-- /.container marketing -->
    <hr>

    <div class="container">          
        <footer class="text-center" id="footer">
            <p>This site was created by Isaac Perez.<a href="#"> Back to top.</a></p>
            <p>Copyright 2014 &copy; The James Baldwin School. <br>Some Rights Reserved</p>
        </footer>
    </div><!-- /.container -->

    <script src="Framework/js/jquery-2.1.3.min.js"></script>
    <script src="Framework/js/bootstrap.js"></script>
    <script src="Contact-Form/contact_form.js"></script>
</body>

Answer №1

When using Bootstrap data-spy, it is crucially dependent on the links and anchors.

To fix this issue, make sure to:

Include an id in your body tag like so:

<body data-spy="scroll" data-target=".navbar" data-offset="0" id="home">

Also, add the anchor to your home page link tag:

<li><a href="#home">Home</a></li>

For a live example, check out the jsfiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I remove a row from an MVC webgrid using an ajax call?

Within my MVC Razor view, I have a partial view containing webgrid data. My goal is to include an action link to delete a specific row of data. To accomplish this, I crafted the following JavaScript function: function delMeal(pid) { if (confirm("Do yo ...

What is the best way to structure files within the css and js folders after running the build command in Vue-cli?

Vue-cli typically generates files in the following structure: - dist -- demo.html -- style.css -- file.commom.js -- file.commom.js.map -- file.umd.js -- file.umd.js.map -- file.umd.min.js -- file.umd.min.js.map However, I prefer to organize them this way: ...

Display a unique button and apply a strike-through effect specifically for that individual list item

I've encountered an issue with my code that is causing problems specifically with nested LI elements under the targeted li element: $('#comment-section .comment-box a#un-do').hide(); $('#comment-section ul li[data-is-archived="true"]& ...

Which specific CSS attributes should be applied to create a scroll bar within this table?

Below is the table that I am working with: 'table' I want to ensure that its width remains the same even when the screen size is reduced, and only add a scroll bar to view it. I have already included overflow: scroll; in the container <div> ...

Exploring jQuery Mobile - What Causes an Empty State?

Using $.mobile.navigate("#test-page", {id:123}) for navigation to a secondary page seems to be successful. The transition between pages is smooth.... but the state remains empty! According to the documentation, the state should contain all necessary info ...

Using Jquery to swap out div elements and reinitialize code after selecting a menu <a href>link<</a>

I have a jQuery script that swaps out a div when a href="#1" is clicked. The same link, a href="#1", is then replaced by a href="#2" and vice versa. Here is the jQuery code: $('.child2, a[href="#1"]').hide() $('#replacepagelinks a').c ...

Leverage the power of AJAX and PHP to securely save comments for future

I have coded a JavaScript function that uses POST and GET methods to send comments from an input field and retrieve them when the page reloads. However, I am unsure of how to handle the data after it is sent in order to save it and access it again later. E ...

Utilizing React Router to dynamically render components based on JSON object data

My current challenge involves rendering React components based on the component names in a JSON file I've created. Specifically, I want to render the TestSection component within the context of my Route component. To achieve this, I am utilizing the ...

I'm having trouble with my script only fetching the first row of my PHP table. Can someone please take a look at my code

Below is my JavaScript snippet: $('input#name-submit').on('click', function() { var name = $('input#name-submit').val(); if($.trim(name) != ''){ $.post('getmodalreasonUT.php', {name: name}, ...

Enable row selection in UI-Grid by clicking on a checkbox with AngularJS

I am a newcomer to angular js and I am looking to have the checkbox automatically selected when clicking on a row to edit that specific cell. I have implemented a cell template to display the checkbox in the UI-grid, but now, when I select a row, the row i ...

JavaScript errors due to miscalculations Incorrect calculations lead

Here is the formula I am using in my Javascript code: total = parseFloat(unit * rate) + parseFloat(rateamount) + parseFloat(((unit * rate) + (rateamount)) * (tax/100)); The values for the variables are as follows: unit = 5, ra ...

Tips for extracting dynamically loaded content from a website using Node.js and Selenium?

I'm currently encountering some challenges when trying to scrape a website that utilizes react for certain parts of its content, and I'm unsure about the reason behind my inability to extract the data. Below is the HTML structure of the website: ...

Enhancing Symfony's performance through optimized Ajax response time

When using Symfony2, I am experiencing differences in loading times for AJAX requests between development and production environments. In development, it takes 1 second to load, while in production it only takes 500 milliseconds for a simple call: Here is ...

What is the process for dynamically assigning a color picker hex value as HTML attributes in PHP?

Is it possible to create a color picker that allows the user to select a hex value and then automatically apply it as an attribute in an HTML tag, like shown below? <p style="background-color: #FCF8C0;">TEXT GOES HERE</p> In the code example ...

Using PM2 to Manage Your PHP Scripts in Cluster Mode

Currently, I have been effectively managing single instances of PHP daemons with PM2, and so far everything is running smoothly! When it comes to managing Node.js/IO.js apps with PM2, I can easily launch them in cluster mode without any issues. However, t ...

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

My website has a hamburger menu for mobile devices, but there's a problem. When the page loads on a small screen, the hamburger menu is off to the right, causing side scrolling issues and white space. I thought it might be a CSS problem, but after exp ...

Having trouble removing lines from Router Link? Unfortunately, using style={{'textDecoration': 'none'}} doesn't seem to be doing the trick

Does anyone know why the text decoration is not working on my link when I use text-decoration none? Any solutions or suggestions would be greatly appreciated. Thank you in advance! Navbar.js file import React,{useState} from "react"; import { mak ...

What is the best way to use jQuery to display the character represented by an ASCII code &###?

Struggling with printing text? I am trying to append some content to an array, but it's showing special characters like &aacute; instead of the actual accented letters. Any suggestions on how to fix this issue? This is for a select tag, so I&apos ...

The Reason Behind Component Non-ReRendering in Redux

I am currently facing an issue with my component and reducer. The `componentDidMount()` method in my component is calling a server to get some data, but the component doesn't re-render after the action is performed. I have checked my code multiple tim ...

Displaying an array of data from a list of arrays in AngularJS' session storage

Whenever a button is clicked, the data will be pushed into an array list and stored in session storage. var data = [ 'name':"name", 'id'=1 ]; var arrayList = new Array; arrayList.push(data); sess ...