Copy link to clipboard
Copied
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.
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[hr
...Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
I've made that change but it still doesn't seem to fix it unfortunately.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
‎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>
Copy link to clipboard
Copied
Your working version uses Foundation, not Bootstrap. Know your framework.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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() {
Copy link to clipboard
Copied
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!