Smooth Scrolling - Creating your first atom (Revised)
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
some more basic information
perishablepress.com/ids-are-anchors-too/
Mark already posted the screenshot ... -
The following users have thanked you: Zoran Kanti-Paul, L Rebelo
-
-
-
- Zoran Kanti-Paul
- Sr. Rocketeer
- Posts: 240
- Thanks: 5
-
OK good to know. Right now I have an 'old' link that is left over from my PRE Gantry 5 template. #rt-expandedbottom.
Obviously that does not work. It is a link in my MAIN MENU. If I put this as an example: #keyareas into the CSS ID, would I then edit my MAIN MENU link from the #rt-expandedbottom, to #keyareas and that would work to jump smoothly down the page to the block with the CSS ID of #keyareas...?
Just checking, is the '#' redundant? is it automatically added.
Sorry for asking these questions like this, but trial and error is too time consuming. And once I know this I don't have to ask again.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
In you link (inc menu item) you need to use the "#" because that is what denote it's an anchor you are linking to. So you menu item should be linking to "#keyareas". Then wherever that point is on the page the ID needs to be "keyareas" (without the #) so if that is on a particle in the CSS ID field you just key "keyareas".
Regards, Mark. -
The following users have thanked you: Zoran Kanti-Paul
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Zoran Kanti-Paul
- Sr. Rocketeer
- Posts: 240
- Thanks: 5
- Brilliant. It is working nicely. Thanks! And now I know the process this is super easy to use. I assume we can use the same method to 'scroll to top' as well? Would I need a block at each 'anchor level' for that? Or do we have some type of 'floating' scroll to top' available for Gantry 5?
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
- most use the the id of a logo placed on the top of the page for a scroll to top ...
-
The following users have thanked you: Zoran Kanti-Paul
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
There's already a "totop" particle that you can add to your layout. It's doesn't float though but you could easily do that with a little custom CSS - if you need help with that though please raise a new topic and it's not pertinent to this tutorial.
Regards, Mark. -
The following users have thanked you: Zoran Kanti-Paul
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Zoran Kanti-Paul
- Sr. Rocketeer
- Posts: 240
- Thanks: 5
- Good thinking. But the link to CLICK on at that particular level, would I use a block for that too?
-
-
-
- Zoran Kanti-Paul
- Sr. Rocketeer
- Posts: 240
- Thanks: 5
-
great. you posted after I did..I see it now mate.
I just wanted to post an update to this.
Of course anchor tags work exactly as stated above. But that will not work across the entire website. EXPLANATION - If you have a MAIN MENU link that you want to have JUMP down the FIRST or MAIN page of your site this method : index.php#anchor, will work.
But if, like in my case, I also have pages linked in my main menu that take them OFF of the first landing page, then none of those anchors will work!
The work around that I did was to edit my MENU item, and instead of just the index.php#anchor as the URL I put the ENTIRE URL
This then will jump down and smooth scroll if you have that atom enabled, on the FRONT page, but also take you directly to the anchor on the front page from ANY OTHER page in the website as well. (dependant on linking to it in the menu on those subseqeuent pages).
I know this might be obvious to some, but I thought I would post it anyway, since I just encountered this myself. - Last Edit: 8 years 4 months ago by Kat05.
-
The following users have thanked you: steve123
-
-
-
- Michal R
- Newbie
- Posts: 12
- Thanks: 0
-
Hi.
This works great, but only if an anchor looks like #myanchor
The problem is, when the anchor looks like www.mywebsite.com/en/some-page#myanchor
On my website I have menu in layout:
- submenu (which directs to www.mywebsite.com/en/some-page )
-- submenu-item-1 (which directs to www.mywebsite.com/en/some-page#myanchor1 )
-- submenu-item-2 (which directs to www.mywebsite.com/en/some-page#myanchor2 )
-- submenu-item-3 (which directs to www.mywebsite.com/en/some-page#myanchor3 )
I don't care about smooth scrolling from other page, the point is, that there is no possibility to smooth scroll on the same page when anchor is part of the link.
How can I solve this?
PS
Hydrogen theme (v5.4.9) on Joomla. - Last Edit: 7 years 1 month ago by Michal R.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
As it states in step 3 the links have to being with a # for this to work. You will have to modify the code if you want it to wok on full links.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.075 seconds