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

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

    XMLWordPrintable

    Details

    • Database:
      Any
    • Testing Instructions:
      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.  
    • Difficulty:
      Easy
    • Affected Branches:
      MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull Master Branch:
      MDL-66463-master
    • Sprint:
      Moodle 3.9 - Moppies Kanban

      Description

      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

       

        Attachments

        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

          Activity

            People

            • Votes:
              1 Vote for this issue
              Watchers:
              10 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Fix Release Date:
                11/May/20

                Time Tracking

                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