Проблемы с плавной прокруткой URL с одной страницы на другую - PullRequest
Новая
       4

Проблемы с плавной прокруткой URL с одной страницы на другую

0 голосов
/ 01 июня 2019

Я использую GSAP. Я получаю вопрос о плавной прокрутке.

У меня есть две страницы. home.php и aboutus.php. У меня есть одно меню, и я добавляю динамически на всех страницах.

Я на главной странице, и если я нажимаю contactus, то работает плавная прокрутка, и мой URL-адрес http://localhost:8080/example/smoth1.php#contactus

Теперь моя проблема, я нахожусь на странице aboutus, и когда я нажимаю contactus, я получаю URL http://localhost:8080/example/aboutus.php#contactus

Он не перенаправляет на домашнюю страницу, потому что у меня есть раздел с контактами на домашней странице.

Я пытался <li><a href="smoth1.php#contactus">Contactus</a></li>, но тогда мой прокрут не работал.

Не могли бы вы помочь мне в этом? 

$(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>
...