Jump to content
GreenSock

hybreeder

smooth scroll one page to another page using gsap

By hybreeder, in GSAP. Views: 1,695

Moderator Tag

Recommended Posts

Posted

Hello,

I am using Greensock animation for smooth scroll clicking on the menu. I have three pages which are `menu.php, index.php, terms.php`.

Now I am on `index.php` page and there is no issue with scrolling if I clicking on the menu then it's targeting the right id. No issue on the index page.

 

Now I am on `terms.php` page from there If I click on the about menu then it's not redirecting on the id.
I am getting the URL like `http://localhost/test-menu/terms.php#contact`

 

URL should be displayed `http://localhost/test-menu/index.php#contact`

 

Hope you all understand my issue. Would you help me out in this?

 

In the `menu.php` page, I added my menu code which is
          

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

In the `index.php`, I added the code which is
    
    <?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>

 

In the `terms.php`, I added the code

    

    <?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 scroll script

    /** 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;}

Link to comment
Share on other sites
Posted

You'll need two different menu php files or some logic in your one menu.php.

 

Basically ... if #about, #services, and #contact are not ids on the current page ... you want to route the user to those ids on index.php. So, basically you want some logic that asks

 

"are #about, #services, and #contact on this page" ... if so

  

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

 

If not, do this

  

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

 

  • Like 2
Link to comment
Share on other sites
  • Author
Posted

Thanks for the reply Shaun Gorneau, 

 

Is there any other way to do this within a single menu?

because of I tried below code but it's jumping directly on target.

  

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

 

Even I tried which you suggested

1) First one. It's not working properly 

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

 

2) Second one. it is jumping directly on target. 

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

 

Link to comment
Share on other sites
Posted

@hybreeder Which you use where is entirely dependent on where in the URL structure you are. It's a bit difficult to determine which paths you should have where based on your URL structure. For example

 

if your visitor was on http://www.somedomain.com/some/path

 

and clicked on

 

a link with href="terms.php", they would be routed to http://www.somedomain.com/some/path/terms.php
a link with href="./terms.php", they would be routed to http://www.somedomain.com/some/path/terms.php
a link with href="../terms.php", they would be routed to http://www.somedomain.com/some/terms.php
a link with href="/terms.php", they would be routed to http://www.somedomain.com/terms.php

 

So it's difficult to say what you need without knowing your structure. Do the elements with IDs #about, #services, and #contact exist on ALL pages but not terms.php ... or only index.php?

 

 

 

 

  • Like 1
Link to comment
Share on other sites
  • Author
Posted

Thanks for the reply again

 

Elements with IDs are only on the index.php page. 

 

Yes, I know that path scenario.

 

If I add below then smooth scroll not working and my URL is http://somedomain.com/#services. It's jumping on the id's section. 

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

 

Same as on the terms.php page. I clicked on service and my URL is showing  http://somedomain.com/#services but it is also jumping. I need it's smoothly to reach the target.

Link to comment
Share on other sites
  • Author
Posted

If I remove my previous script (GSAP and javascript) and I add below script then it's working according to your href scenario. But I have to use GSAP


  

/** Smooth Scrolling Functionality **/
var jump=function(e)
{
    //alert('here');
   if (e){
       //e.preventDefault();
       var target = jQuery(this).attr("href").replace('/', '');
   }else{
       var target = location.hash;
   }
   jQuery('html,body').animate(
   {
    scrollTop: (jQuery(target).offset().top) - 130
   },500,function()
   {
       //location.hash = target;
   });
}
jQuery('html, body').hide();
jQuery(document).ready(function($)
{
    $(document).on('click', 'a[href*=#]', jump);

    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $('html, body').show();
    }
});
/** END SMOOTH SCROLLING FUNCTIONALITY **/

 

Link to comment
Share on other sites
Posted

Oh, I see. I thought you were having problems with the navigation.

 

To stop the default behavior of the browser "jumping" to a fragment identifier on page load, you use a bit of Javascript to

 

  1. tell it to not do so and
  2. then check to see that the fragment identifier exists on the page
  3. then scroll to it :)

Here is what I do on a few sites to handle this ... note, I make use of jQuery, so there is a bit of it here. If you don't use jQuery, you'll have to unpack those out to native JS.

 

I've commented to help point out what is doing what.

  

setTimeout(function() {
  if( location.hash && $(location.hash).length > 0 ) { // if there is a hash in the URL and that ID exists on the page
    window.scrollTo(0, 0); // <- Keeps the page from jumping by default
		    
    setTimeout( function() {
      $('body').animate({
        scrollTop: $(location.hash).offset().top-70 //-70 is specific to my case because of a fixed navbar
      }, 1500);
    }, 1300 ); // This is my delay so the smooth scroll doean't start immediately ... adjust to your needs
        
  }
}, 1);

 

  • Like 3
Link to comment
Share on other sites
  • Author
Posted

What I did now I deleted my whole GSAP script and add your script and it's still jumping. I don't know where I am doing wrong.

 

My menu is

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

Link to comment
Share on other sites
Posted

Do you have a URL where we can see what is going on?

Link to comment
Share on other sites
  • Author
Posted

Hello,

 

Sorry, I don't have any access to upload the code to the server and share the URL.

 

I am sharing two zip file.

One with Jquery script and second with GSAP.

 

 Jquery is working but the second GSAP not working.

 

Please check and assist me.

test-menu-gsap.zip

test-menu-jquery.zip

Link to comment
Share on other sites
Posted

I've set up an example here for you to look at. To simplify what is going on here, I've moved Javascript to scripts.js, styles to style.css, and removed all references to ScrollMagic.

 

http://shaungorneau.com/gsap-help/hybreeder/

 

The only thing you won't be able to see in the browser is the content of menu.php which is ...

  

<? if( $_SERVER['REQUEST_URI']  == '/gsap-help/hybreeder/' || $_SERVER['REQUEST_URI'] == '/gsap-help/hybreeder/index.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>
<? }else{?>
<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>
<? }?>

 

  • Like 2
Link to comment
Share on other sites
  • Author
Posted

Thanks for reply

 

replay appreciate your help but I don’t want to use 2 menu.  I can directly add the menu code on each page to access without using your above code. But I need it should be only one menu.

Link to comment
Share on other sites
Posted
1 minute ago, hybreeder said:

Thanks for reply

 

replay appreciate your help but I don’t want to use 2 menu.  I can directly add the menu code on each page to access without using your above code. But I need it should be only one menu.

 

I'm not sure what you mean by needing only one menu. This is one menu ... is just a little logic to determine if path traversal is needed. If you truly want to avoid that, and if your project is hosted in the document root, you can simply use

  

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account