Having issues getting anchor transitions working

[Boss_DJ]

Hi,

Like my title says, I'm having a bit of trouble getting my anchor transitions to work. I've done this before on other sites with no problems. In this instance, I set them up the same way and copied the script I used on these other cases but for some reason it's not working. As you can see on my page, the up and down arrows should take you smoothly to each section. Can anyone see what I'm missing here? Im stumped.

http://mustangdriveinguelph.ca/mv/test.html

Thanks ahead of time.

[osgood_]

You have quite a few errors on that page (run it through the W3c validator to check) but the most likely cause of the issue is that you have your function inserted before the call to the jquery library.

I would fix up the errors and move the function to AFTER the link to the jquery library and see if that works.

[Boss_DJ]

I've made that change but it still doesn't seem to fix it unfortunately.

[Nancy OShea]

Is this what you're going for?

Bootstrap Parallax Template  -- Click on top nav links to show the data-spy & smooth scrolling effects.

View source to see the code.

[Boss_DJ]

‎Unfortunately no. Basically I have three containers. The first down arrow takes you the the middle container then that bottom arrow takes you the third one. The top arrows take you back up respectively. The anchors are currently working as they should but my problem is getting the transition working.

I have it working in mustangdriveinguelph.ca and that's where I copied the sc‎ript from so I'm not sure what I did differently.

Sent: Sunday, September 24, 2017 1:24 PM

To:

Reply To: jive-345044363-95r9-2-5v0ql@adobe-v8.hosted.jivesoftware.com

Subject: Having issues getting anchor transitions working

Having issues getting anchor transitions working

created by Nancy OShea<https://forums.adobe.com/people/Nancy+OShea> in Dreamweaver support forum - View the full discussion<https://forums.adobe.com/message/9845373#9845373>

[Nancy OShea]

Your working version uses Foundation, not Bootstrap.  Know your framework.

[Boss_DJ]

I know my framework thank you, but that has nothing to do with why I'm here. I heavily googled if this was a bootstrap issue but I wasn't able to find anything on this. Do you tell others to know what they're doing when they come here for help?

Know basic respect.

[Nancy OShea]

I was not being disrespectful.   I gave you a working Bootstrap example.   A look at the smooth scrolling script would have answered your question sooner.    But you chose to ignore it & then posted a Foundation example which is not compatible with Bootstrap.  Like I said "know your framework" because scripts from one rarely work in another. 

[osgood_]

https://forums.adobe.com/people/Boss+DJ  wrote

I have it working in mustangdriveinguelph.ca and that's where I copied the script from so I'm not sure what I did differently.

As I said, Bootstrap is the culprit in this issue, either use the inbuilt crap that Bootstrap provides you with or my advice is DONT use it.

[osgood_ · Accepted solution]

https://forums.adobe.com/people/Boss+DJ  wrote

I've made that change but it still doesn't seem to fix it unfortunately.

That's because  Bootstrap is interfering with the function.

Add a class of scroll-to to any anchor tags that you want to act as a scroll to trigger - so like below for your 2 anchor tags:

<a href="#middle" class="scroll-to"><i class="fa fa-angle-down fa-2x"></i></a>

<a href="#top" class="scroll-to"><i class="fa fa-angle-up fa-2x"></i></a>

Then change the .click function:

from:

$('a[href*=#]:not([href=#])').click(function() {

to:

$('.scroll-to').click(function() {

[Boss_DJ]

That worked wonderfully. Thank you.

I figured it may be a bootstrap vs foundation thing and looked into that before coming here but I wasn't able to find anything that told me to do things differently.

Thanks again!