What's causing the navigation anchor tags to malfunction?

My website consists of two pages. The home page features a one-page navigation system where clicking on 'about' scrolls down to the corresponding section within the same page.

PART 1 - On index.html

  • However, when clicking on the 'blog' navigation item, it should redirect to blog.html. In the .header-nav section, I have included the following code: 
    <li><a href="blog.html">Blog</a></li>
    , but the link does not seem to work as expected. The browser shows that the link is directed to blog.html, but it doesn't navigate there.

PART 2 - On Blog.html

  • On blog.html, I have copied the .header-nav code from index.html. However, when I click on 'about', it should take me back to the home page and scroll down to the about section, which is not happening. The code works fine on the index.html page. Any insights or ideas on this issue would be greatly appreciated!

Index.html


    <header class="main-header">
        <div class="header-container">
            <!-- logo wrapper -->
            <div class="logo-wrapper">

            <div id="logo-img-name">
                <picture>
                    <source class="logo-img" media="(min-width: 320px)" srcset="img/mobile/mobile-logo.jpg">
<!--                  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
 -->                  <img class="logo-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
                </picture>
                <p class="logo-name"><a href="index.html">Keeva</a></p>
                            <!--  BURGER NAV -->

            </div>


            </div>

        <a class="burger-nav"></a>  
        </div>  

            <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.html">Blog</a></li>
                <li><a id="contact" href="#contact-View">Contact</a></li>
            </ul>
    </header>

Blog.html

    
    <!-- Code for Blog.html goes here -->

JavaScript


// JavaScript functions go here

Full index.html

   
    <!-- Full index.html code goes here -->
javascripthtmlcssnavigationonepage-scroll

Answer №1

Within your javascript code, specifically in this snippet:

    // prevent anchor tags from functioning (?)
    e.preventDefault();

It seems like the current functionality is preventing the page from changing, suggesting you may be working on a "one page" website.

To address this issue, update that portion of code with the following:

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

Furthermore, ensure to add the class scrollLink to links you wish to enable smooth scrolling down the page.

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

The error message SCRIPT1003 is indicating that a colon was expected

There are many questions with this title, but I have a unique one for you. An error message "SCRIPT1003: Expected ':' (1,78)" pops up when I launch my website. I am using webpack and typescript in my project. Below is my tsconfig: { "co ...

javascripttypescriptinternet-explorerwebpack

Revamp your array elements with MongoDB - Substring replacement

Having some difficulty replacing a substring within various documents. Below is an example of one such document: { "images" : [ { "url" : "https://example/1234" }, { "url" : "https://example/afaef" }, { "url" : ...

javascriptjquerymongodbmongoose

Working with the Response Object in Django/JQuery and passing it to javascript using Urllib3

I am facing a challenge in downloading headlines from BBC using Ajax and jQuery in Django. I am attempting to use Urllib3 to create a request for the RSS/XML Top News data from the BBC website available at this link: '' Although I believe I hav ...

javascriptjqueryhtmldjangorss

Is there a way to identify and remove empty spaces and carriage returns from an element using JavaScript or jQuery?

Is there a way to easily remove empty elements from the DOM by checking if they contain only whitespace characters or nothing at all? I am attempting to use $.trim() to trim whitespace in empty elements, but some are still returning a length greater than ...

javascriptjquerytrim

How to change the display property in CSS from block to none using React

Just started diving into React, and I am struggling with making the content disappear when clicking a button. Tried using state and even checked out https://jsfiddle.net/uwadhwnr/, but nothing seems to work. Feeling quite frustrated at the moment. <div ...

cssreactjs

Error in refreshing JWPlayer page: Plugin loading failure - File not located

I'm implementing JWPlayer on my Localhost environment. Here's the code snippet I'm using: <div id="Player">loading...</div> <script type="text/javascript"> jwplayer("Player").setup({ file: "<?php echo $video[' ...

phpjavascriptjqueryjwplayer

What is the best way to implement click-to-play functionality for my HTML5 videos without disrupting the built-in controls?

I have implemented code to enable click-to-play functionality on HTML5 videos using the following script: $('video').click(function() { if ($(this).get(0).paused) { $(this).get(0).play(); } else { $(this).get(0).pause(); } }); W ...

javascripthtml5-video

Is it more advantageous to utilize MongoDB's findOne method on a model or an instance?

One advantage of using the updateOne function compared to findOneAndUpdate is that it can be executed on both the model and the instance. Following authentication, I have the user object attached to req. Currently, I am opting to run the method on my user ...

javascriptnode.jsmongodbmongoosestatic-methods

Tips for compressing an image in a React application with the help of react-dropzone

I have integrated the react dropzone package into my Next JS app and I am looking to add automatic image compression feature. After receiving the images, I converted the blob/preview into a file reader. Then, I utilized the compressorjs package for compre ...

javascriptreactjsnext.jsdropzone.jsimage-compression

Error encountered when asynchronously iterating over an object in TypeScript

Could someone please help me understand why I am getting an error with this code? var promise = new Promise((resolve, reject) => { resolve([1, 2, 3, 4, 5]); }); async function doSomethingAsync() { var data = await promise; data.forEach(v = ...

javascripttypescriptecmascript-6

Automatic switching between Bootstrap 5 tab panes at precise time intervals

Is there a way to have the Bootstrap 5 tab-pane automatically switch between tabs at set intervals, similar to a Carousel? I found a code snippet on this link, but it appears to be outdated and only works for Bootstrap 3. Could someone assist me in updati ...

javascripthtmljquerybootstrap-5

Troubleshooting problems with encoding in a PHP contact form

As a newcomer to PHP, HTML, and programming in general, I am working on creating a contact form using PHP and HTML. So far, everything is functioning properly and I am able to receive emails. However, there is one issue - when I try to fill out the form in ...

phphtmlencoding

Tips for creating a responsive image gallery

After completing the development of my interactive Video Gallery using only HTML and CSS, I encountered an issue with responsiveness. Whenever I resize my browser, the images go out of the frame. I am looking for a solution to make the image gallery adjust ...

javascriptcsshtmlresponsive-design

Protection of HTML Contact Forms

I'm attempting to send an email using an HTML contact form. Here is the HTML code I've created: <form id="contact_form" action="sendMail.php" method="post"> <input id="firstname" name="firstname" type="text" placeholder="First ...

phpjqueryhtmlajaxemail

Awesome C# PDF Printing Solution [closed]

This question does not comply with our Q&A standards and guidelines. To maintain the integrity of our platform, we require answers to be factual, supported by references or expertise. However, this question may provoke debates, arguments, polls, or pro ...

c#htmlpdfpdf-generation

Avoiding the appearance of a scrollbar when content extends beyond its containing block

I am struggling with writing markup and CSS to prevent a background image from creating a scrollbar unless the viewport is narrower than the inner content wrapper: The solution provided in this post didn't work for me: Absolutely positioned div on ri ...

htmlcssscrollbarbrowser-scrollbars

Is it possible to eliminate the black bars from YouTube HQdefault image using only CSS?

(After searching extensively, I couldn't find the exact same question and answer) I have a dilemma with displaying YouTube's hqdefault thumbnails on my page. It seems that they are 480 by 360 pixels, resulting in black bars at the top and bottom ...

htmlcss

What is the best way to hide a custom contextmenu in AngularJs?

I created a custom contextmenu directive using AngularJs. However, I am facing an issue where the menu is supposed to close when I click anywhere on the page except for the custom menu itself. Although I have added a click function to the document to achie ...

javascriptjqueryangularjscontextmenu

Connect the dxSelectBox to the button click event

Currently, I am working with the DevExtreme MVVM architecture. In my specific situation, I am trying to bind a dxSelectBox (combo box) upon a button click event. Here is the HTML CODE snippet: <div data-bind="dxButton:{onClick:display,text:'Click ...

javascriptjquerymvvmdevexpressdevextreme

When utilizing the "nofollow/sponsored" attribute, window.open will open in a new window as opposed to a new tab

When using a window.open link with the "nofollow" attribute, I expect it to open in a new tab. However, it opens in a new window instead. This code successfully opens in a new tab: $('.b_link').click(function (e) { e.preventDefau ...

javascripthtmljqueryhyperlink