0
Welcome Guest! Login
0 items Join Now

Smooth Scrolling - Creating your first atom (Revised)

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 83024
    • Thanks: 10561
    • Web Designer/Developer

    Smooth Scrolling - Creating your first atom (Revised)

    Posted 3 years 11 months ago
    • The latest version of the smoothscroll atom can now be found here .


      Following on from my tutorial "Creating smooth scrolling for same page links in Callisto" http://www.rockettheme.com/forum/joomla-template-callisto/243216-creating-smooth-scrolling-for-same-page-links-in-callisto I thought I would demonstrate how easy it is to turn that into an atom that you can easily add to any Gantry 5 template.

      So we're going to create a particle (actually an Atom since it does not render any visible output):

      1. create yaml file called smoothscroll.yaml in /templates/rt_callisto/custom/particles that has this content:
      name: Smooth Scrolling
      description: Configure Smooth Scrolling of links
      type: atom
      
      form:
        fields:
          enabled:
            type: input.checkbox
            label: Enabled
            description: Globally enable Smooth Scrolling atom.
            default: true
      
          duration:
            type: input.text
            description: Enter the duration (time in milliseconds).
            label: Duration (ms)
            default: 900
      
          easing:
            type: select.selectize
            description: Choose the easing type
            label: Easing
            default: swing
            placeholder: 'Select...'
            options:
              swing: swing
              linear: linear
      Please note that is extremely important that you get the indents correct in a yaml file - so i've also included the completed file in a zip file attached to this post too.

      The yaml file basically defines the particle and it's fields in the admin area of gantry 5.

      2. create a twig file called smoothscroll.html.twig in /templates/rt_callisto/custom/particles with this content:
      {% extends '@nucleus/partials/particle.html.twig' %}
      
      {% block javascript %}
      
      <script>
      jQuery(document).ready(function(){
        jQuery('a[href^="#"]').on('click',function (e) {
            e.preventDefault();
        
            var target = this.hash;
            var ID = jQuery(this).attr("id") ;
        
            if (ID != "g-totop") {
              if (!target) {target=".site";}
              var $target = jQuery(target);
              jQuery('html, body').stop().animate({
                'scrollTop': $target.offset().top
                }, {{ particle.duration }}, '{{ particle.easing }}', function () {if (target!=".site") {window.location.hash = target;} 
            });}
        });
      });
      </script>
      {% endblock %}

      I have included the completed file in a zip file attached to this post too.

      Update: If you use this atom in Interstellar template you will need to alter line 7 of the above to be:
      jQuery('a[href^="#"]:not(a[href^="#module-owlcarousel-"])').on('click',function (e) {


      3. now all that remains for you to do is to drag the atom onto the layouts in your outlines - that's it! now all of your internal page links (those that begin "#") will smoothly scroll the page to that location.

      This image is hidden for guests.
      Please log in or register to see it.


      This atom provides settings to alter the duration of the scroll and the easing type.

      This image is hidden for guests.
      Please log in or register to see it.



      Regards, Mark.
    • Last Edit: 6 months 2 weeks ago by MrT.
    • The following users have thanked you: Seniha Meliha, sean.oleary, Henning, steve123, theITfactor, JMDonald, Cyskye, Kosnichev Pavel, David C Hammond, Andrey

    • 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 3 years 10 months ago
    • Thank you !) work fine !

      Example from me:
      <a href="#scroll" style="">scroll</a>

      <h1 id="scroll" style="">scroll</h1>

      Sorry for my English )
    • Last Edit: 3 years 10 months ago by Kosnichev Pavel.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 83024
    • Thanks: 10561
    • Web Designer/Developer

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

    Posted 3 years 10 months ago
    • Kosnichev Pavel - it's very hard to help you if you don't post a url?

      In fact, 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.
    • Arnaud's Avatar
    • Arnaud
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

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

    Posted 3 years 10 months ago
    • Hello Mark,

      Thank you for this tutorial.
      After a few weeks working on some other projects, I'm getting back to my project involving RT templates.

      First thing I did was updating everything that had to be updated. It seems that while I was away, almost everything had changed :
      Joomla itself, Callisto, Gantry 5…

      I followed your tutorial but there seems to be a problem with the ToTop particle. The scrolling is not smooth at all.
      It took me a long time to understand that now, with the last Gantry update, this element has a smoothscroll by default (correct me if I'm wrong).

      Which means we have some kind of "double smoothscroll instructions", producing some quite dirty result.
      Your tutorial works fine with other # elements on the page, but now there is this problem with the ToTop particle.

      Is there some way to modify your script so that it doesn't affect the ToTop particle ?
      Or to modify the new default behaviour of Gantry ?

      Thank you !

      Arnaud
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 83024
    • Thanks: 10561
    • Web Designer/Developer

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

    Posted 3 years 10 months ago
    • Arnaud - 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.

      I just tried on my own test system and it works fine with totop too?

      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.
    • Arnaud's Avatar
    • Arnaud
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

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

    Posted 3 years 10 months ago
    • Mark,

      Thank you for your fast answer. So I uploaded my site once again.
      Here is the access to my back office in the secure tab.

      Once you're on the homepage, you can test "TOP LINK" and "BOTTOM LINK", clearly visible in the text. Those work fine. But you should see that the ToTop particle is not that nice.

      Another (small) question : using your script with this ToTop particle indicates "#.site" in the address bar. Could it be possible to be simply "#" ?

      Thank you for your help and sorry if this link is reminding you some bad memories :-)

      Arnaud
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 83024
    • Thanks: 10561
    • Web Designer/Developer

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

    Posted 3 years 10 months ago
    • I just wanted to let you know that I haven't forgotten you - it's just I have not yet found the time to come up with a solution for you.

      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.
    • Arnaud's Avatar
    • Arnaud
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

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

    Posted 3 years 10 months ago
    • OK, thank you for this note. I'll be waiting then :-)
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 83024
    • Thanks: 10561
    • Web Designer/Developer

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

    Posted 3 years 10 months ago
    • Ok I have changed the code above to ignore the gantry "to top" and also remove the ".site" from the url - it should be find now.

      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.
    • Arnaud's Avatar
    • Arnaud
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

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

    Posted 3 years 10 months ago
    • Working perfectly, bravo and many thanks ! :-)

      Here are two questions about this :

      - It seems the ToTop particle does not follow easing and duration parameters of the smoothscroll particle.
      I guess we have to apply these parameters to the ToTop particle as well, right ?, but I don't know how to do that.

      - With this new script, there is no "#" in the URL when we click on Totop.
      Is there a simple way (ie not taking you two hours !) to modify this script so that the other #s behave like this as well ? I mean no #this or #that are added to the url when clicking on links which are not ToTop ?

Time to create page: 0.100 seconds