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 into a page, it automatically takes into account all rows of this page and enables scrolling between them.

  • Every row on a page participates regardless row settings
  • Inner rows don't participate (only [vc_row], not [vc_inner_row])
  • Rows in a footer also participate in scrolling, but they don't form navigation dots

NOTE: to avoid issues with overlapping navigation dots you need add Page Scroller element into the last row of your page, but don't locate it in a separate row, just add it into 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 right or left-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.