使用GSAP

Question

我正在使用Greensock动画来平滑滚动点击菜单。我有三页menu.php, index.php, terms.php。

现在我在index.php页面，如果我没有滚动问题  点击菜单，然后定位正确的ID。索引页面没有问题。

现在我在那里terms.php页面如果我点击关于菜单，那么它不会重定向ID。 我收到了http://localhost/test-menu/terms.php#contact

这样的网址

你能帮助我吗？

在menu.php页面中，我添加了我的菜单代码

    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="terms.php">Terms</a></li>
    </ul>

在index.php中，我添加了

代码

<?php include('menu.php'); ?>
<section id="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>

</section>
<section id="services">
    <h2>Service</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</section>

<section id="contact">
    <h2>Contact</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

在terms.php中，我添加了代码

<?php include('menu.php'); ?>
    <section>
        <h2>terms</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </section>

GSAP平滑滚动脚本

/** Smooth Scrolling Functionality **/
$(document).ready(function() {
// Init controller
var controller = new ScrollMagic.Controller();
// Change behavior of controller
// to animate scroll instead of jump
controller.scrollTo(function(target) {
    TweenMax.to(window, 2, {
        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", "a[href^=#]", function(e) {
    var id = $(this).attr("href");
    if($(id).length > 0) {
        e.preventDefault();
        // trigger scroll
        controller.scrollTo(id);
        // If supported by the browser we can also update the URL
        if (window.history && window.history.pushState) {
            history.pushState("", document.title, id);
        }
    };
});
});

的CSS

ul{margin: 0;padding: 0;list-style: none;}
ul li{display: inline-block;margin: 10px;}
section{min-height: 500px;}