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

Creating a Sudoku puzzle grid with HTML and CSS - a step-by-step guide

Apologies for the basic inquiry, but I have created a sudoku grid with the following structure. Modified(Using Tables): <table id="grid" border="1" style="border-collapse: collapse;"> <tr class="row"> ...

Uncovering the secrets to fetching numerous JSON files asynchronously using JavaScript and JQuery

My goal is to fetch multiple JSON files using JavaScript or jQuery and extract elements named j_name, j_value, and j_sts into sarr[i], rarr[i], and parr[i], respectively. var sarr = new Object; var rarr = new Object; var parr = new Object; //num_json rep ...

Unlocking the potential of input values in Angular.jsDiscovering the secret to

I'm currently experimenting with the angular date picker directive. My goal is to retrieve the entered date value from the date picker and log it to the console. However, all of my attempts so far have been unsuccessful. Here's a snippet of my c ...

Position the div to align with just one side of the table-cell

I am struggling with making the height of my code dependent on only the left column, while still allowing the right column to be scrollable if it contains more content than the left column. Despite my best efforts, I can't seem to figure out how to a ...

The appearance of a <div> element results in a border being applied to a different element

When hovering between the two borders, an undesirable (albeit very small) border appears around them. Can anyone assist me with this issue and explain why it is happening? I have attempted to set a transparent border on each element but without success. R ...

Sending a POST request using HTML

Recently, I decided to create a URL Shrinker for fun and followed the Traversy Media tutorial to build it. If you're interested, here's the GitHub link to his project: https://github.com/bradtraversy/url_shortener_service As I aim to turn it in ...

Steps to remove a specific child element using jQuery:

CSS: <h1><br style="clear:both;"></h1> I am currently working on a project that involves using the Wikipedia API. One issue I've run into is cleaning up the raw HTML output from Wikipedia, specifically dealing with removing a speci ...

Converting HTML to a Text String (not for display) using Angular

When it comes to displaying HTML in Angular, there are numerous approaches available. For example, using $sce.trustAsHtml(myHtmlVariable) is one way to achieve this. However, I am interested in creating something like the following: myStringVariable = s ...

Determine in Typescript if a value is a string or not

In my code, I have a component: export type InputData = string | number | null; interface InputData { data?: string | number | null; validate: boolean; } const App: React.FC<InputData> = ({ data = '', validate = true, }) => ...

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

Attempting to align a FieldSet in the middle of the page

Having trouble aligning a field set within a div. The first two elements are centered right next to each other, but the third one is justified left and I'm struggling to center it within the div. JSP <tr> <th> <span onclick="toggleDiv ...

The Impact of Ajax on Online Search Algorithms

There's a website that dynamically loads content at . An example page from the site can be found at: . The entire content on this page is generated using a cURL parser script. <?php $___notjson=1; ini_set('display_errors', 1); header (&a ...

Improving the layout of text by adjusting the width within a flex-box styled card

I have a card with the style property "display: flex;" applied to it along with other stylings, all of which are checked in the snippet below. My goal is for the text within the card to move to a new line once its width reaches either 120px or 7 ...

Installing Yarn causes the download of an unconventional directory

Currently, I am facing an issue while trying to install yarn on my Macbook Pro (2017). The installation process seems to be downloading a folder called /react-praktis/ instead of completing successfully. Below is a screenshot for reference: https://i.stac ...

Angular - The confirmDialog from Primeng is appearing hidden behind the modal from ng-bootstrap

I am currently utilizing the primeng and ng-bootstrap components to develop an angular-based website. In order to collect data, I have implemented a form within an ng-bootstrap modal. However, upon clicking the "save" button on the modal, the primeng conf ...

Is it possible to send a ternary expression inside a component as a prop based on whether the condition is true or false?

Is it possible to include a ternary expression inside a component and pass it as a prop depending on whether the condition is true or false? <ExperienceList onUserToggle={this.onUserToggle} jobs={this.state.jobs[this.state.value]} { th ...

Error: Unable to access the property 'fn' of an undefined object in electron version 2 using Angular 6

I am currently utilizing Angular 6.0.3 and electronjs 2.0.2 with the package.json configuration shown below: { "name": "test", "version": "1.0.0", "license": "MIT", "main": "electron-main.js", "author": { "name": "Moh ...

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

I've put together a demonstration that highlights the issue I'm facing. Upon visiting the contact section, you'll notice that all the slickJS slides are stacked vertically initially, but once you interact with them by clicking on the arrow o ...

What is the definition of the term "WebapiError"?

I'm currently developing a Spotify Web App that focuses on retrieving the top albums of KD Rusha using the Client ID and Artist ID to exclusively fetch his releases on Spotify. To accomplish this, I am utilizing an npm package called spotify-web-api-n ...

Trouble with displaying Django for loop in HTML template

Having an issue with displaying the latest post. Here is the code: views.py def latest_post(request): latest = Post.objects.all().order_by('-id')[:1] context = {'latestPost': latest} return render(request, 'latest_pos ...