时间戳

首页 > 解决方案 > 链接到不同页面中的部分不起作用

javascript - 链接到不同页面中的部分不起作用

问题描述

我正在尝试使用以下代码在 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被禁用，它就可以工作。

这是我的 fullPage 脚本

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

标签： javascripthtmluser-interfacehyperlinkfullpage.js

解决方案

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

您可以在 fullpage.js 文档中阅读有关它的更多信息，并且可以在示例文件夹中看到大量示例。

例如：

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

推荐阅读