Smooth scrolling tweaks with code
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
linear. Here's a visual demonstration of the difference. The default value is
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.
If you're using a different theme, enclose this code in
<script>tags and place it in the
<head>code of your HTML.
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
- 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
- If you don't want to change the duration or type of animation, leave the default values of
swingin Lines 20 and 21.