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

Transform an asynchronous callback into an asynchronous generator format

retrieving data from Redis with the help of Node.js

Employ a separate function to extract HTML content from a jQuery target in an AJAX response

Adjusting table font dynamically using Angular and CSS

Using Angular's ng-repeat alongside a bootstrap input checkbox, make sure to incorporate a dynamic ng-model and utilize ng-

Guide on sending two values from a form using Ajax and the POST method

A error was encountered stating that the formValidation function is not defined when the HTML form element is submitted

Express.js POST Request Not Being Accepted | 404 Error Detected

Unable to obtain return value in AngularJS controller or view

How to assign a global variable in Angular 2 from within a promise

Fixing Function for Internet Explorer versions 6-8

Accordion-style elements arranged in a grid format, smoothly displacing surrounding content

Javascript tabs with clickable links

Implementing efficient loading and dynamic updates in web applications with Angular.js and php through

Creating multiple nested ng-repeats in an AngularJS table

Convert HTML Form to PDF or Docx with Angular 4

Guide to encapsulating a container within a map function using a condition in JSX and TypeScript

Add the file retrieved from Firestore to an array using JavaScript

Is there a way to customize the color of the HR element in a Material-UI Select Field?

What is the best way to handle this unconventional JSON structure?