Page Scroller


Page Scroller allows jumping between page sections/rows by mouse scroll wheel or by a swipe gesture on touch screens. Example

When you add Page Scroller to a page, it automatically takes into account all rows of this page and enables scrolling between them.

  • Every row on a page participates regardless of row settings
  • Inner rows don't participate (only [vc_row], not [vc_inner_row])
  • Rows in a footer also participate in scrolling, their dots aren't shown by default

To avoid overlapping navigation dots you need to add Page Scroller element to the last row of your page. Don't locate it in a separate row, add it to the last row with already existing elements.


Disable scrolling at width #

This option allows disabling Page Scroller on some devices by screen width. You can set it to 300px to make Page Scroller work on all devices including mobiles

Scroll Speed (milliseconds) #

This option sets the scrolling interval between rows

Show Navigation Dots #

This option allows enabling sided navigation dots, which help to indicate a number of rows. Every navigation dot is related to a row of this page. Example 1, Example 2

Dots Style #

Select one of the predefined styles of navigation dots. See examples:


Dots Position #

Select the left or right-hand side position of navigation dots

Dots Size #

Set this value to change the relative size of navigation dots, you can use px, em, rem, and %. Default value is 10px

Dots Color #

Apply the desired color of navigation dots using the color picker. By default dots color get "Text color" value from Theme Options > Colors > Content colors

Show dots for Footer #

Check this box to show footer dots in page scroller navigation