Highlighted

Having issues getting anchor transitions working

Advocate ,
Sep 24, 2017

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[href*=#]:not([href=#])').click(function() {

to:

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

Views

192

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Having issues getting anchor transitions working

Advocate ,
Sep 24, 2017

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[href*=#]:not([href=#])').click(function() {

to:

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

Views

193

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 24, 2017 0
LEGEND ,
Sep 24, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
Advocate ,
Sep 24, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
Adobe Community Professional ,
Sep 24, 2017

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
LEGEND ,
Sep 24, 2017

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() {

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
Advocate ,
Sep 24, 2017

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
Adobe Community Professional ,
Sep 24, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
LEGEND ,
Sep 24, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
Advocate ,
Sep 24, 2017

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
Advocate ,
Sep 24, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
Adobe Community Professional ,
Sep 24, 2017

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. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0