0
Welcome Guest! Login
0 items Join Now

Smooth Scrolling - Creating your first atom (Revised)

    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29361
    • Thanks: 954
    • Volunteer

    Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 4 years 8 months ago
  • Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 4 years 8 months ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 90683
    • Thanks: 11842
    • Web Designer/Developer

    Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 4 years 8 months ago
    • 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.
  • Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 4 years 8 months ago
    • 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's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29361
    • Thanks: 954
    • Volunteer

    Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 4 years 8 months ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 90683
    • Thanks: 11842
    • Web Designer/Developer

    Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 4 years 8 months ago
    • 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.
  • Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 4 years 8 months ago
    • Good thinking. But the link to CLICK on at that particular level, would I use a block for that too?
  • Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 4 years 8 months ago
    • 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: 4 years 7 months ago by Kat05.
    • The following users have thanked you: steve123

  • Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 3 years 5 months ago
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 90683
    • Thanks: 11842
    • Web Designer/Developer

    Re: Smooth Scrolling - Creating your first atom (Revised)

    Posted 3 years 5 months ago
    • 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.100 seconds