Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-66463

Add "Go to top" link when scroll down in boost and classic themes

XMLWordPrintable

    • Any
    • MOODLE_38_STABLE
    • MOODLE_39_STABLE
    • MDL-66463-master
    • Easy
    • Hide

      Prerequisites

      1. Create one large course Using the course generator tool.
      2. Test both scenarios using several browsers. At least, Chrome, Firefox, Safari, Opera, IE and Edge.
        • NOTE: on IE and Edge (version <= 18) the sticky property is not compatible and the go to top will be displayed with a fixed position.

      Boost and Classic theme scenario

      1. Go to the new course and scroll down
      2. When the scroll position if greater than 2 times the window height:
        1. A "Go to top" link with an arrow will appear on the bottom-right part of the window.
        2. By clicking on the "Go to top" arrow link the scroll will return to the top of the page. This will cause that the arrow disappears and the setting dropdown button returns to its original position.

       

      Show
      Prerequisites Create one large course Using the course generator tool. Test both scenarios using several browsers. At least, Chrome, Firefox, Safari, Opera, IE and Edge. NOTE : on IE and Edge (version <= 18) the sticky property is not compatible and the go to top will be displayed with a fixed position. Boost and Classic theme scenario Go to the new course and scroll down When the scroll position if greater than 2 times the window height: A "Go to top" link with an arrow will appear on the bottom-right part of the window. By clicking on the "Go to top" arrow link the scroll will return to the top of the page. This will cause that the arrow disappears and the setting dropdown button returns to its original position.  
    • Moppies Kanban

      Some teachers complain that when courses grow it's tedious to got to top page. This situation is even worse when a teacher is reviewing the course content and want to go to edit mode in the middle of the page.

      To solve this situation I develop a small piece of javascript code and some CSS that detects when the user scrolls down and fixes a "Go to top" link and settings dropdown on the right site of the page (see attached image).

       

      How does it works

      The patch modifies these files:

      • theme/boost/amd/src/aria.js (and minified): adds a class called "shrink" to the body when the user scrolls down ("shrink" is the standard name for this kind of dynamics because mainly is it used to shrink the top navbar)
      •  theme/boost/templates/navbar.mustache (and classic theme equivalent): adds a go to top link
      •  theme/classic/templates/navbar.mustache (and classic theme equivalent): adds a go to top link
      • theme/boost/scss (and style): adding positions fixed when  user scrolls down
      • lang/en/access.php: add a new "Go to top" string

       

        1. image-2019-10-04-12-47-20-069.png
          image-2019-10-04-12-47-20-069.png
          833 kB
        2. MDL-66463_go_to_top.jpg
          MDL-66463_go_to_top.jpg
          85 kB
        3. MDL-66463_message.gif
          MDL-66463_message.gif
          459 kB
        4. screenshot-1.png
          screenshot-1.png
          161 kB
        5. Selecció_481.png
          Selecció_481.png
          88 kB
        6. smooth_scroll_moodle.gif
          smooth_scroll_moodle.gif
          833 kB

            tusefomal Ferran Recio
            tusefomal Ferran Recio
            Pau Ferrer Pau Ferrer
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Janelle Barcega Janelle Barcega
            Votes:
            1 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 2 hours, 5 minutes
                1d 2h 5m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.