- Jquery Scroll To Div
- Smooth Scroll Jquery Script
- Smooth Scroll Jquery Plugin
- Html Smooth Scroll To Anchor
![Smooth Scroll Jquery Smooth Scroll Jquery](https://www.cssscript.com/wp-content/uploads/2014/02/Smooth-Toggle-Button-with-Html-5-and-CSS3.jpg)
Posted by Harish Rajora | June 11, 2020
LambdaTest Experiments • Web Development •
LambdaTest Experiments • Web Development •
Getting Started. Compiled and production-ready code can be found in the dist directory. The src directory contains development code. Include Smooth Scroll on your site. There are two versions of Smooth Scroll: the standalone version, and one that comes preloaded with polyfills for closest, requestAnimationFrame, and CustomEvent, which are only supported in newer browsers. Yet another jQuery based smooth scroll script which smoothly scrolls the web page to a specific point/ID/anchor/DIV within the document. Also has the ability to automatically update the url hash when the smooth scroll is completely finished. How to use it: 1. Right font 5 4 128. Create anchor links pointing to the elements with unique IDs.
98193 Views | 4 Min Read
Have you ever noticed how a scroll works on a webpage? What if you are not allowed to touch the mouse or the arrow keys on the keyboard. How would you scroll then? If you happen to have pressed the space key while navigating a page, you’d have noticed that it scrolls down a page, welcome to the club! But in addition to that, there is another way to scroll the page of the website using a dedicated key on the keyboard. Yes, the PgDn (Page Down) key. Now, before reading the post and what we are about to discuss, scroll this page using the page down key and notice if there’s an abrupt pattern (sudden jump).
Scrolling is a commonly used feature on computers. Even without the mouse, there are still a lot of users who rely on the keyboard for scrolling. These users include the readers, editors, and other people who tend to read a lot. As a web developer, you must have coded or noticed a link on the webpage that takes you to another section on the web page by giving the id of that element as href in the anchor tag. It is so instant that the “scrolling” part is quite abrupt.
I have written this article on how to create a smooth scroll with CSS, JavaScript & Jquery to help your users’ scroll smoothly over the pages or the section on the same page.
TABLE OF CONTENT
- How To Create Smooth Scroll With CSS?
- How To Create Smooth Scroll With JS?
- How To Create Smooth Scroll With JQuery?
What Is Smooth Scrolling?
Smooth scrolling is exactly what its name literally suggests i.e. scrolling smoothly on the webpage. As a default scroll behavior, the scroll is very abrupt and sudden but when the smooth scrolling is active on a web page, the web page scrolls down gradually which eases out the efforts by the readers who read a long web page. Let’s see a small demo difference between normal scrolling and smooth scrolling:
The above image uses id as the navigation link for the same page to demonstrate how the page moves when clicked on the link.
If I change the scrolling to smooth, the image would look like this: Sniper app 1 4 0 – snippets manager interview.
Doesn’t it look more graceful and a good choice that a user might prefer?
Smooth scrolling is a very important, useful, and common feature used in web development today. The best thing about creating a smooth scroll is that we get options according to our convenience for creating a smooth-scroll web page. You can achieve Smooth scroll with CSS, JavaScript, and Jquery. We will explore all of the three Smooth scrolls in detail.
How To Create Smooth Scroll With CSS?
CSS provides us a standard property to make a page that scrolls smoothly. This property is called “smooth-behavior”.
The smooth-behavior property for Smooth Scroll in CSS takes four values:
- auto
- smooth
- initial
- inherit
Auto:
The auto value of smooth-behavior in CSS is the default value of the scroll-behavior which is the direct jump from one element to another.
Smooth:
The smooth value of smooth-behavior for Smooth Scroll in CSS changes the element’s scroll behavior from a direct jump to a smooth transition from one element to another. This was shown in the above image.
Initial:
The initial is the reserved keyword for Smooth Scroll in CSS and not a value specific to scroll-behavior. The initial value sets the default behavior of a property like color, align, etc. In this case, initial and auto will behave in the same way as the auto is the default behavior.
Inherit:
The inherent value inherits the value from the parent element.
To apply smooth scroll with CSS, you need to mention one single line on the element you are trying to scroll smoothly.
scroll-behavior: smooth;
The following piece of code will help:
This corresponds to the following effect:
Although incorporating the smooth scroll in CSS will do the job, it is not perfect and neither the best way. For me, as a web developer, I need more control over my web page and definitely the elements I am using on it. In addition to that, as discussed in the next section, the browser support for a smooth scroll in CSS is poor. Since this control is not provided by CSS and, you can rely on JavaScript for the same effects rather than CSS.
Browser Support For Scroll-Behavior
The browser support for the CSS scroll-behavior property is as follows on CanIUse.
As you can see that this property is not browser compatible with all the major browsers, Surprisingly, the scroll-behavior property is poorly supported with Apple still not ready to incorporate this in their browsers. Scroll-behavior being an important property needs a turnaround method to implement in the browsers where it is not supported and help to build a website that works better across different browsers.
To ensure the compatibility of this property with any major browsers, you can perform browser compatibility testing with LambdaTest and ensure that the property works on the browser as intended. LambdaTest offers 2000+ real browsers and devices, you can perform live testing on these browsers to ensure compatibility of the scroll-behavior feature on the browsers you want to target. In case you want to read up more on browser compatibility testing of CSS writing mode, you can refer to our article on the topic.
In order to get better control over the smooth scroll and better cross browser support, you can opt for a smooth scroll with JS or Jquery method to come to the rescue.
How To Create Smooth Scroll With JS?
Smooth scrolling can also be done through JavaScript and it gives better control over the functionalities. For example, through a smooth scroll with CSS, I can apply the scroll behavior only where the scroll event is built in to be triggered like while clicking the web links. But with JavaScript, I can decide when to scroll and how much to scroll i.e. the offset of the element. In this section, I have modified the same code which I wrote above but here I use a smooth scroll with JS for scrolling to the links. For this, the following built-in JavaScript function is used:
window.scrollTo();
This function can be declared for smooth scroll in JS in two ways:
- window.scrollTo(x-coord, y-coord);
- window.scrollTo(options)
The x-coord parameter defines the pixel value in the horizontal direction to which the page needs to be scrolled.
The y-coord parameter defines the pixel value in the vertical direction to which the page needs to be scrolled.
The options field depends on the developer. This field is a dictionary parameter that contains a set of options or parameters defining the characteristics of the smooth scroll with JS. To remember this as a stepwise process, we perform the following process to achieve smooth scrolling with JS:
- Detect the element you want to connect scrolling to.
- Define how much you want to scroll the page.
- Trigger the scrolling property within the function.
If you remember these three steps, scrolling smoothly is a very easy part when it comes to the code. But, before taking reference from this code, ensure that you have deleted the following CSS line from the webpage given in the previous section code:
2 4 |
In the code given in the previous section, add the following code for smooth scroll in JS inside the page at any place:
Now we can relate the code with the steps that I wrote above: