Html Question posted in
Some basic documentation can be found here.

Html – Anchor Links Reloading Page Instead of Scrolling – Purchased Template

I purchased an HTML template online to build a website for a client, but I’m running into an issue with anchor links. The anchor links are supposed to scroll to specific sections of the page, but instead, they reload the page. I’ve followed the usual structure for anchor links (), and the sections have corresponding IDs in the HTML.

However, for some reason, when clicking the links, the page just reloads instead of smoothly scrolling to the section. I’m not sure what’s causing this behavior.

Here’s a simplified example of the code:

 <li class="link menu-timeline">
                          <a class="" href="#projects">
                              <div class="before-span">
                                  <span data-hover="Proyectos">Proyectos</span>
                              </div>
                          </a>
                       </li>

<section id="projects">
-rest of code-
</section>

Has anyone experienced a similar issue with templates purchased online? Could there be something in the template’s JavaScript or CSS preventing the smooth scroll from working properly? Any suggestions on how to fix this would be greatly appreciated!

i tried using chatgpt to analyze the js and css with no avail.

Tags:

2

Answers


  1. 0

    As you mentioned it could be due to your JavaScript causing a page reload. You can check the a tag or parents for relevant click listeners. You can find them using Chrome Developer Tools, then see if the snippet causes the behaviour.

      • Right click on element in page and select "Inspect to open dev tools
      • Alternatively:
        • Open Developer Tools (F12)
        • Select "Elements" Tab (first one by default)
        • Select an Element in the HTML page structure
    2. In the right box go to "Event Listeners" (by default 4th next to "Layout")
    3. Check "Ancestors" checkbox and "All" in dropdown to see all the Event Listeners. Optionally select "Framework Listeners".

    – From here

    In any other case this should not happen. If the issue still persists try one of the following:

    1. Disable all scripts or remove them from the file and see if it still happens
    2. Recheck your hyperlink, that there are not any hidden onclick‘s or something like this
    3. Comment on this answer and let me know if everything else fails
    Login or Signup to reply.
  2. 0

    Set scroll to smooth scroll like this if u have not done already.

     html{
     scroll-behavior: smooth;
 }

    add this in your css.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search