Question

我正在使用GSAP。我正在顺利滚动问题。

我有两页。 home.php和aboutus.php。我有一个菜单，并且正在所有页面上动态添加。

我在主页上，如果单击contactus，则可以平滑滚动，并且URL为http://localhost:8080/example/smoth1.php#contactus

现在我的问题是，我在aboutus页上，当我单击contactus时，我得到的网址是http://localhost:8080/example/aboutus.php#contactus

由于我在主页上有“ contactus”部分，因此无法在主页上进行重定向。

我尝试了<li><a href="smoth1.php#contactus">Contactus</a></li>，但是我的smothscroll不能正常工作。

您能帮我吗？

$(document).ready(function() {
  var controller1 = new ScrollMagic.Controller();
  controller1.scrollTo(function(target) {
    TweenMax.to(window, 3, {
      scrollTo: {
        y: target - 65, // scroll position of the target along y axis
        autoKill: true, // allows user to kill scroll action smoothly
      },
      ease: Cubic.easeInOut
    });
  });
  //  Bind scroll to anchor links
  $(document).on("click", ".smothscrollclass a[href^='#']", function(e) {
    var id = $(this).attr("href");
    if ($(id).length > 0) {
      e.preventDefault();
      // trigger scroll
      controller1.scrollTo(id);
      // If supported by the browser we can also update the URLï»¿
      if (window.history && window.history.pushState) {
        history.pushState("", document.title, id);
      }

    };
  });

});

.col1 {
  min-height: 1000px;
}

<div>
  <ul class="main_list smothscrollclass">
    <li><a href="#home">Home</a></li>
    <li><a href="#contactus">Contactus</a></li>
    <li><a href="aboutus.php">Aboutus</a></li>
  </ul>
</div>

<div class="col1" id="home">
  <h2>Home</h2>
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>


</div>

<div class="col2" id="contactus">
  <h2>Contactus</h2>
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>


</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script>

平滑地将URL问题从一页滚动到另一页

0 个答案: