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

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

    XMLWordPrintable

Details

    • 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

    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

        Issue Links

          Activity

            People

              tusefomal Ferran Recio
              tusefomal Ferran Recio
              Pau Ferrer Pau Ferrer
              Sara Arjona (@sarjona) Sara Arjona (@sarjona)
              Janelle Barcega Janelle Barcega
              Huong Nguyen, Bas Brands, Mathew May, Amaia Anabitarte, Carlos Escobedo, Laurent David, Mikel Martín Corrales, Sabina Abellan, Sara Arjona (@sarjona), Huong Nguyen, Barbara Ramiro, Bas Brands, Mathew May, David Woloszyn, Jake Dallimore, Meirza, Michael Hawkins, Raquel Ortega, Safat Shahin, Stevani Andolo
              Votes:
              1 Vote for this issue
              Watchers:
              12 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                15/Jun/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