Flask - href to anchor on a different page (navigation bar)

Question

I am using Flask to develop a web app. On the home page (index.html), the navigation bar navigates one to specific sections on the page using anchors:

<a class='text' href='#body2'>calculate</a>

<a id="body2"></a>

On the home page, there is a form which links you to a new page (output.html). I want the same navigation bar to navigate a user to the previous page (index.html) and the specific sections. I have written the navigation links on the second page as shown below:

<a class='text' href="{{ url_for('index') }}#body2">calculate</a>

When I click the navigation links, the new page does not load. However, this is the strange thing, when I inspect the navigation link element in my browser and click the link through the inspect client, it does take me to the correct page/section.

If I remove '#body2' from the above line, it successfully navigates me to the previous page, but not to the specific section.

(If you want to physically try out the navigation links on the web app, use the following link: http://yourgreenhome.appspot.com/ - Enter some random values into the blank form entries and it will take you to the second page. It is running through Google's App Engine but this is definitely not causing the problem because the problem still occurs when I run the site on local host).

Answer 1

You have an error in smoothscroll.js

$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;


      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    }
  });
});

In advpy page, $(hash).offset() is undefined, thus top is undefined. Because you are preventing the default event ( event.preventDefault(); ) the click on the link doesn't occur.