From our sponsor:Elevate all your marketing with Mailchimp Smarts.
In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery.
May 06, 2019 Triggering the smooth scroll. Now, we need to start scrolling the element at a pace based on the duration provided in the parameters. A continuously self-executing function is provided to. Definition and Usage The scroll-behavior property specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.
Beatunes 4 0 18 download free. So, let's start!
The Markup
The markup for our example page is going to be very plain. We will have three sections with a heading and a paragraph and am unordered list for the navigation:
The HTML is going to be the same for both examples.
Let's take a look at the style.
The CSS
Since we have two examples, we will start with the horizontal page style.
The main idea is to make the sections very wide and 100% in height. We will add a background image to the bottom right of each section:
We need to give the body a valid height, because we want to be able to define the height 100% to the section. With positioning the body absolutely and saying top:0px and bottom:0px we stretch the body and give it a height.
The style for the vertical page layout is going to look as follows:
Nothing special here, just that we give a big height to the sections. The background image is positioned to the bottom left then.
Let's add the JavaScript
The JavaScript
The function for the horizontal scrolling effect is the following:
And the function for the vertical scrolling effect is the following:
You can animate to the respective element by using one of the easing effects. You can see the effect in the vertical demo.
If there is no JavaScript enabled, we still have our good old scroll bars.
Smooth Page Scroll.min.js
Check out the demo, it will lead you to the horizontal page. Here is the direct link to the demo of the vertical page scrolling, or simply click on the link in the horizontal demo.
Scrolling to an element can be achieved in Javascript using the scrollIntoView() method. Smooth animation and customizing the alignment can be set through the scrollIntoViewOptions parameter.
Smooth Scroll Html
Quick Sample Code
Smooth Scroll Html
Quick Sample Code
Smoothscroll Js
NOTE : The scrollIntoView method scrolls with respect to the scrollable parent of the element. In usual cases, this means the browser window. But in cases where the element is contained within another scrollable element (element having a scrollbar), scrolling happens with respect to the parent and not the browser window.
Customizing Scroll Behavior and Alignment with scrollIntoViewOptions Parameter
The scrollIntoView method also accepts a parameter through which you can set an animated scroll behavior and also customize its alignment.
This parameter scrollIntoViewOptions is an object with the following properties :
behavior : This sets whether scrolling should be an animated one or an instant scroll to the element. It can have the following values :
- smooth : Does a smooth scrolling
- auto : Instant scrolling. This is the default value.
block : This sets the vertical alignment of the shown element with respect to the scrollable parent. It can have the following values :
- start : Element is aligned at the top of the scrollable parent. This is the default value.
- center : Element is aligned at the middle of the scrollable parent.
- end : Element is aligned at the bottom of the scrollable parent.
- nearest : This aligns the element suited to the current situation. If user is currently above the element, it will be aligned at the bottom of the scrollable parent. If user is currently below the element, it will be aligned at the top. If is is already in view, nothing will happen.
inline : This sets the horizontal alignment of the shown element with respect to the scrollable parent. It can have the following values :
- start : Element is aligned at the left of the scrollable parent.
- center : Element is aligned at the middle of the scrollable parent.
- end : Element is aligned at the right of the scrollable parent.
- nearest : Aligns the element suited to the current situation. If user is currently at the right of the element, it will be aligned at the left of the scrollable parent. If user is currently at the left of the element, it will be aligned at the right. Nothing happens if already in view. This is the default value.
