Question

我正在尝试通过使用以下代码来创建指向HTML另一个网页不同部分的链接。 tourPack.html页中以下链接

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

下面给出的第2部分的代码位于index.html页面

<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>

它被重定向到 index.html 页，而不重定向到section2。我还在index.html中使用了一堆JavaScript，包括整页滚动库 fullPage.js 。当我完全禁用Javascript时，链接似乎正常工作。任何帮助表示赞赏:)

编辑：

我尝试了这个小解决方法

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

只要禁用 fullPage.js CDN ，它就可以工作。

这是我的全页脚本

 <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

您没有使用名为anchors的fullPage.js选项。您需要使用该选项才能获取每个部分的锚点。

您可以在the fullpage.js documentation中阅读有关此内容的更多信息，并可以在examples folder上看到很多示例。

例如：

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

链接到其他页面中的某个部分无效

1 个答案: