Smooth scroll URL issues from one page to another page

[Narendra Verma]

I am using GSAP. I am getting the issue on the smooth scroll.

I have two pages. home.php and aboutus.php I have one menu and I am adding dynamically on all the pages.

I am on the home page and if I click on the contactusthen smooth scroll is working and my URL is http://localhost:8080/example/home.php#contactus which is correct.

Now my issue is, I am on aboutus page and when I click on contactus i am getting the URL http://localhost:8080/example/aboutus.php#contactus

It's not redirecting on the homepage because I have a contactus section on the home page.

I tried <li><a href=".php#contactus">Contactus</a></li> but then my smooth scroll not working.

 

Would you help me out in this?

See the Pen YbdNVX by Narendra_verma (@Narendra_verma) on CodePen

[GreenSock]

Welcome to the forums, @hybreeder. This sounds like more of a ScrollMagic or general question rather than a GSAP-specific one. You might want to ask the author of ScrollMagic (it is NOT a GreenSock product) if you're having issues related to that. I'm not very familiar with it. I wish we had the resources to answer everyone's general questions or questions about 3rd party products, but definitely let us know if there are any GSAP-specific things we can help with. 

[Narendra Verma]

Thanks for the reply.

 

Sorry for the inconvenience. I thought I am using GSAP script so I will get some help from here.

 

Where should I ask this question?

[GreenSock]

Oh, we'd be happy to answer any questions about ScrollToPlugin or GSAP or anything like that. But from what I can tell, this has nothing to do with any of that. 

 

I did notice that you've got your click event handler using this selector: ".smothscrollclass a[href^='#']" but your "about" link does NOT start with "#", thus it never triggers that event handler. It just treats it like a normal link. I didn't see any dynamically-loaded things, so maybe your codepen isn't representative of the real context, but maybe you just need to fix your selector text for your click handler. Or maybe I'm misunderstanding your goal/question. 

 

Was there something about GSAP that we could help with? 

[Narendra Verma]

Actually, I have a menu.php file and I added all the menu code in that and  I included the <?php include('menu.php');?> on all the pages.

 

I just added my code in the codepen to understand my code.

 

Yes, Using "smothscrollclass" I added in the menu(Menu is dynamically to It will display on all the pages).

Yes, My about link does not start with "#" because of I have about us page and once the user clicks on it then it will redirect on the aboutus.php page.

 

but from the aboutus.php page, If I click on contact us then my URL is showing  http://localhost:8080/example/aboutus.php#contactus

which is wrong because contactus section is on my home page not on about us.

[Visual-Q]

1 hour ago, hybreeder said:

but from the aboutus.php page, If I click on contact us then my URL is showing  http://localhost:8080/example/aboutus.php#contactus

 

This would be expected because you are telling it to link to the id #contactus on the current page so if you're on aboutus.php it will look for aboutus.php#contactus.

[Narendra Verma]

Hi Visual-Q,

 

Yes, How can we solve this issue?

 

[Visual-Q]

You'd have to add some logic to your function to test whether you're on the home page, if you are it can scroll to it if you aren't you would tell it to link to home.php#contactus instead.

 

If someone wants to jump in and help you code this they are welcome to but as Jack has said it's not a gsap question and therefore not what we are focused on here. If you have any gsap related questions we'd be happy to help.

 

 

 

 

[Narendra Verma]

Hi Visual-Q,

 

What logic I have to use? Can you share some example? 

[Visual-Q]

I just had to make something similar for a wordpress site.

 

This script will scroll to an item if it is on the same page otherwise href links to another page as normal.

 

// JavaScript Document

// This script will scroll to an anchor link on a page from any wordpress menu item with an added class of scrolltolink
// the link for the menu item should contain the full file path with url and anchor i.e. http://myURL/#myAnchor
// for a non wordpress site it should work the same in any normal list based menu strucure as below
//   <li class="scrolltolink">
//     <a href="http://myURL/#myAnchor">myAnchor</a>
//   </li>
// if the script finds a matching #anchor-link on the page it overides default behaviour and scrolls to it
// otherwise the link will behave normally and goto the href link on desired page

var stl;

// find links with scrolltolink class
var scrollToLink = document.querySelectorAll(".scrolltolink a");


// loop through links
for(stl = 0;stl<scrollToLink.length;stl++){
  
    // add event listner  
    scrollToLink[stl].addEventListener('click', function (e) {
        
        //get #anchor link from href
        var hrf =   this.href,
            anchr = hrf.substring(hrf.indexOf("#"))
        
        // if anchor link matches id on page scroll to it 
        //otherwise link behaves normally and goes to desired page/anchor
        
        if(document.querySelectorAll(anchr).length > 0) {
            e.preventDefault();
            TweenMax.to(window, 0.75, {scrollTo:{y:anchr,autoKill:false},ease:Power2.easeInOut});
        }

    });
}