Having trouble with Javascript in getting one-page scroll navigation to work?

Question

Having trouble with Javascript in getting one-page scroll navigation to work?

Hey there, I am working on creating a one-page scroll navigation with some basic javascript to add a smooth animation effect that takes 1 second as it scrolls to the desired section. However, I seem to be experiencing an issue where it's not functioning correctly. Any suggestions or ideas from anyone?

Html


            <ul class="header-nav">
            <li><a id="home" href="#home-View">Home</a></li>
            <li><a id="about" href="#about-View">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a id="contact" href="#contact-View">Contact</a></li>
        </ul>

Javascript


    $(document).ready(function() {

    // adding click listeners to each anchor tag
    setBindings();

});

function setBindings() {
    $(".header-nav a").click(function(e) {
        // prevent default behavior for anchor tags
        e.preventDefault();
        var sectionID = e.currentTarget.id + "Section";

        $("html body").animate({
            scrollTop: $("#" + sectionID).offset().top
        }, 1000)

        alert("sdf");
    })
}

javascript jquery html css

Answer 1

Answer №1

id that was being targeted in your jQuery script could not be found in the markup, causing it to fail with an error in the console. Try the following revised code:

  $(document).ready(function() {

    // Add a click listener to each <a> tag
    setBindings();

  });

  function setBindings() {
    $(".header-nav a").click(function(e) {
      // Prevent anchor tags from functioning (?)
      e.preventDefault();
      var sectionID = e.currentTarget.id + "-View";
      console.log(sectionID);
      $("html,body").animate({
        scrollTop: $("#" + sectionID).offset().top
      },1000);
      alert("sdf");
    })
  }

body {
  height: 1200px;
}

#home-View {
  margin-top: 50px;
  background: red;
  height: 200px;
}

#about-View {
  margin-top: 50px;
  background: red;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-nav">
  <li><a id="home" href="#home-View">Home</a></li>
  <li><a id="about" href="#about-View">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a id="contact" href="#contact-View">Contact</a></li>
</ul>
<div id="home-View"></div>
<div id="about-View"></div>

Answer 2

id that was being targeted in your jQuery script could not be found in the markup, causing it to fail with an error in the console. Try the following revised code:

  $(document).ready(function() {

    // Add a click listener to each <a> tag
    setBindings();

  });

  function setBindings() {
    $(".header-nav a").click(function(e) {
      // Prevent anchor tags from functioning (?)
      e.preventDefault();
      var sectionID = e.currentTarget.id + "-View";
      console.log(sectionID);
      $("html,body").animate({
        scrollTop: $("#" + sectionID).offset().top
      },1000);
      alert("sdf");
    })
  }

body {
  height: 1200px;
}

#home-View {
  margin-top: 50px;
  background: red;
  height: 200px;
}

#about-View {
  margin-top: 50px;
  background: red;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-nav">
  <li><a id="home" href="#home-View">Home</a></li>
  <li><a id="about" href="#about-View">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a id="contact" href="#contact-View">Contact</a></li>
</ul>
<div id="home-View"></div>
<div id="about-View"></div>

Answer 3

Answer №2

Test out this functional example for navigating to a specific element on the page.

$(document).ready(function() {

    // Add a click listener to each <a> tag
    setBindings();

});

function setBindings() {
    $(".header-nav a").click(function(e) {
       
        // Prevent anchor tags from default behavior (?)
        e.preventDefault();
        var sectionID = e.currentTarget.id + "Section";
        console.log(sectionID);
        $("html body").animate({
            scrollTop: $("#" + sectionID).offset().top
        }, 1000)

        alert("sdf");
    })
}

#homeSection
{
  height:200px;
  background-color:red;
  border:1px solid #DDD;
}

#aboutSection
{
  height:200px;
  background-color:white;
  border:1px solid #DDD;
}

#blogSection
{
  height:200px;
  background-color:blue;
  border:1px solid #DDD;
}

#contactSection
{
  height:200px;
  background-color:#DDD;
  border:1px solid #DDD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-nav">
            <li><a id="home" href="#home-View">Home</a></li>
            <li><a id="about" href="#about-View">About</a></li>
            <li><a id="blog" href="#">Blog</a></li>
            <li><a id="contact" href="#contact-View">Contact</a></li>
        </ul>
        
  
 <div id="homeSection"></div>
 <div id="aboutSection"></div>
 <div id="blogSection"></div>
 <div id="contactSection"></div>

Answer 4

Test out this functional example for navigating to a specific element on the page.

$(document).ready(function() {

    // Add a click listener to each <a> tag
    setBindings();

});

function setBindings() {
    $(".header-nav a").click(function(e) {
       
        // Prevent anchor tags from default behavior (?)
        e.preventDefault();
        var sectionID = e.currentTarget.id + "Section";
        console.log(sectionID);
        $("html body").animate({
            scrollTop: $("#" + sectionID).offset().top
        }, 1000)

        alert("sdf");
    })
}

#homeSection
{
  height:200px;
  background-color:red;
  border:1px solid #DDD;
}

#aboutSection
{
  height:200px;
  background-color:white;
  border:1px solid #DDD;
}

#blogSection
{
  height:200px;
  background-color:blue;
  border:1px solid #DDD;
}

#contactSection
{
  height:200px;
  background-color:#DDD;
  border:1px solid #DDD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-nav">
            <li><a id="home" href="#home-View">Home</a></li>
            <li><a id="about" href="#about-View">About</a></li>
            <li><a id="blog" href="#">Blog</a></li>
            <li><a id="contact" href="#contact-View">Contact</a></li>
        </ul>
        
  
 <div id="homeSection"></div>
 <div id="aboutSection"></div>
 <div id="blogSection"></div>
 <div id="contactSection"></div>

Having trouble with Javascript in getting one-page scroll navigation to work?

Answer №1

Answer №2

Similar questions

Is there a way to move the cards to the next line within a wrapper when the screen size is reached?

Ajax fails to transmit data to PHP script

Switching between rows in a table once information has been added to an array | Vue

Compile a list of URLs found within a particular HTML A tag and save them to a text file

How come despite installing node 10.1.0, the system is showing the installed version as 5.6.0?

Unable to connect to server using React-Native fetch. Localhost is not being used

JavaScript TweenJS is a powerful library that simplifies

Surprising Vercel Production Problem: Functions in Development Environment but Fails in Production Even After Reverting to a Functional Commit

Having difficulty launching the sapper app in production mode

Top method for handling chained ajax requests with jQuery

Understanding the concept of inertia within the OrbitControls feature of ThreeJS

Tips for assigning custom values using CSS and jQuery for a standalone look

Contrast 2 GET objects retrieved from separate controllers

The fixed left div and scrollable right div are experiencing issues with their alignment

Trigger a JavaScript function when a key is pressed down

Cloning a table row through editing functionality in ReactJS

Having issues with the basic KnockoutJS binding not functioning as expected

What steps should I take to modify this recursive function so that it can verify the property name of an object?

The resolution of deferred actions is not as successful as foreseen

Injecting live data into an input field within a table using Angular 4