SmoothScroll atom - Freebie by MrT
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Some of you have followed my previous SmoothScroll atom tutorial
https://rockettheme.com/forum/gantry5-for-joomla/249639-smooth-scrolling-creating-your-first-atom-revised
.
Here is an updated version of the atom that adds a few more configurable options including the ability to specify an offset for the scrolling and whether the hash link should be set in your browser address bar. Please note that the smooth scrolling will only work for links within the same page that start with "#".
1. To install it:
Joomla:
From the ZIP file copy smoothscroll.yaml and smoothscroll.html.twig to /templates/TEMPLATENAME/custom/particles (note you may need to create this folder).
GRAV
From the ZIP file copy smoothscroll.yaml and smoothscroll.html.twig to /user/data/gantry5/themes/TEMPLATENAME/particles (note you may need to create this folder).
Wordpress
From the ZIP file copy smoothscroll.yaml and smoothscroll.html.twig to /wp-content/themes/TEMPLATENAME/custom/particles (note you may need to create this folder).
2. On you base outline > page settings - drag the smooth scroll atom on to the atom section. Then click on the "settings" cog and change your setting to meet your requirements and SAVE;
Regards, Mark. - Last Edit: 2 years 3 months ago by MrT.
-
The following users have thanked you: Rick Ghaly, sklar, Michael Vaughan, Zbigniew Sokal, kobinas, Bigfly
- 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.
-
-
-
- kobinas
- Newbie
- Posts: 12
- Thanks: 0
-
Hello MrT i create one page site where i want to add menu with anchor to scroll down smooth.
First i add the 2 files and create the particles folder but you dont mention if we have to do anything else to apear in Gantry.
Second if we manage to add it and work fine, the link for the menu is #the_section_i_want_to_go. In Gantry5 the name of the posision is the section or no and how i can find it.
Sorry for the English.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
See step 2 to actually use it.
You can use an inspector tool to find the ID that we have assigned to section but also you can create your own CSS ID on any section or particle on the layout of your outline.
Regards, Mark. -
The following users have thanked you: kobinas
- 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.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Also, Please post your FTP logon, password and FTP URL in the secure area of your post.
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.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Ok, so where's your link that you want to click on to scroll to the new position in the page?
Please do a screenshot of your problem and annotate to make it clear.
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.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Well, nothing is going to happen until you create the links.
I just created three menu item links for you using the IDs that I added to the "heading" particles on the layout of your outline. Now the smooth scrolling works.
Regards, Mark. -
The following users have thanked you: kobinas
- 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.056 seconds