Link to a section in a different page not working

Question

I am trying to create a link to a different section of another webpage in HTML by using the following code. The link below in the tourPack.html page

<li><a href="/html/index.html#section2">Gallery</a></li>

The code of section 2 given below is in index.html page

<div class="section" id="section2">
   <a name="1"></a>
   <div class="aboutMeContainer">
      <div class="introduction" data-aos="fade-up" data-aos-duration="800">
         <h2 data-aos="fade-up" data-aos-duration="1200">Explore Sri Lanka with Monkey Tours</h2>
         <p data-aos="fade-up" data-aos-duration="1000">Lorem, ipsum dolor sit amet consectetur
            adipisicing elit. Eius nostrum consectetur veritatis
            porro,
            modi
            nobis, deleniti voluptatem vitae
            repudiandae excepturi natus ex qui possimus eaque animi minus cum corrupti aliquam esse
            recusandae
            adipisci sit, sint dignissimos rem. Impedit, sequi tenetur.
         </p>
         <div class="CEOImageContainer">
            <img src="/images/AkilaPunchihewa.jpg" alt="Founder">
         </div>
         <hr>
         <span class="title">Founder</br>Akila Punchihewa</span>
      </div>
   </div>
</div>

It gets redirected to the index.html page but not to the section2. I also use a bunch of javascript in index.html including the full page scrolling library fullPage.js . The link seems to be working correctly when I disable Javascript altogether. Any help is appreciated :)

EDIT:

I tried this little workaround

<script>
    $(document).ready(function () {
        alert(window.location.hash);
        if (window.location.hash) {
            setTimeout(function () {
                $('html, body').animate({
                        scrollTop: $('#section2').offset().top
                    },
                    1000);
            }, 1000);
        }
    });
</script>

It works as long as the fullPage.js CDN is disabled.

Here is my fullPage script

 <script>
        $(document).ready(function () {
            $('#fullPageContainer').fullpage({
                autoScrolling: true,
                navigation: true,
                scrollBar: true,
                navigationTooltips: ['Monkey Tours', 'About us', 'Gallery', 'Reviews', 'Tour Packages',
                    'Contact Us'
                ],
                responsiveWidth: 769,
                responsiveHeight: 0,
                keyboardScrolling: true,
                controlArrows: false,
                slidesNavigation: true,
                loopBottom: true,
                css3: true,
                loopBottom: true,
                afterRender: function () {
                    setInterval(function () {
                        $.fn.fullpage.moveSlideRight();
                    }, 100000000);
                }
            });
            fullpage_api.setMouseWheelScrolling(false);
        });
 </script>

Answer 1

You are not using the fullPage.js option named anchors . That's the option you need to use in order to get the anchor for each section.

You can read more about it in the the fullpage.js documentation and you can see plenty of examples on theexamples folder .

For example:

  new fullpage('#fullpage', {
    anchors:['section1', 'section2', 'section3']
  });