Smooth scrolling tweaks with code

You can use JavaScript to customize smooth scrolling, particularly duration, the type of animation, and the offset of the target from the top of the screen, tweaked for screen size. 

Adjust how far from the top of the page the target sits when the scroll is finished

By default, when smooth scrolling finishes, the target sits 100px below the top of the page. This vertical displacement downwards is called the offset. The default of 100px works for the Beaver Builder Theme and other themes with normal-sized headers, but in other cases, you might want the target to sit higher or lower on the page when the scroll finishes, to ensure it's high enough on the page but not obscured by something like a fixed or shrink header.

In this code snippet, an offset of 70 pixels is assigned to a variable called offset. Adjust this number to suit your need. The offset customizations described in the sections can apply a different offset value when certain conditions apply, such as on smaller devices.

Adjust offset differently depending on screen width

You may have different fixed header settings on smaller devices or no fixed header at all. If so, you can add an offset that applies only to smaller devices. In the following code snippet, the offset variable is set to 0 if the window width is less than 992px, which means both medium and small devices will have no offset, but large devices will.

You can adjust the window width in Line 12 to apply to small devices only or add another if-statement to have different offsets for large, medium, and small devices.

Adjust the offset to compensate for the WordPress admin bar

Another example where an offset is required is to compensate for the height of the WordPress admin bar when a user is logged in. In this code snippet, 32 pixels are added to the offset variable to accommodate the WordPress admin bar. In this example, where 70px has been set for large devices and 0px set for medium and small devices, the total offset value after Line 17 applies is 102px for large devices and 32px for medium and small devices.

Change the duration of the scroll

By changing the duration of the scroll, you can make it slower or faster. The value is in milliseconds. The default duration is one second = 1000 milliseconds.

Change the type of animation

Line 20 lets you choose the type of animation in terms of variation of the speed of scroll throughout the scroll time. The values are swing and linear. Here's a visual demonstration of the difference. The default value is swing.

How to add the code

Depending on where you add the code, you can make these smooth scrolling tweaks specific to one page or apply them globally across your site.

  • To change smooth scrolling site-wide, if you're using the Beaver Builder Theme add the code in the following section to Customize > Code > JavaScript.
    If you're using a different theme, enclose this code in <script> tags and place it in the <head> code of your HTML.
  • To customize smooth scrolling on a single page, open the page for editing in Beaver Builder, and in the upper left corner click the arrow to reveal the Tools menu, click Layout CSS & JavaScript, then click the JavaScript tab. Add the code in the following section and tweak the values as you like.

Full code example

The following example shows a jQuery that you can modify to customize all of the features discussed in the previous sections. If you are familiar with jQuery it won't be hard to modify this code to include only the features you want.

If you aren't familiar with jQuery, you can still eliminate the features you don't want by leaving the default values in the code. Here are some specific suggestions.

  • If you don't need any vertical offset, change the offset value in Line 6 to 0.
  • If you want a vertical offset but want it to apply to all device sizes, use the same value in Lines 6 and 13.
  • There's no harm in keeping the offset that applies any time the WordPress admin bar is displayed, but if you really don't want to enable that feature, change the value in Line 17 to 0.
  • If you don't want to change the duration or type of animation, leave the default values of 1000 and swing in Lines 20 and 21.