Smooth Scroll Jquery

Click to Scroll to Top. The above example contains the button and the scrollTop jQuery. Click the above button, it will take to the top part of the page immediately on click. However, its not a smooth scroll system.If you want to perform a smooth scroll to the top of the page, you need to read further. Smooth Scroll to Top of The Page Using jQuery.

• Smooth Scroll Plugin Jquery
• Smooth Scroll Jquery Codepen
• Js Smooth Scroll

1. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event. Additional Notes: As the.scroll method is just a shorthand for.on( 'scroll', handler ), detaching is possible using.off( 'scroll' ).
2. A teeny tiny, standard compliant, smooth scroll script with ease-in-out effect and no dependancy. SmoothScroll will tie all your internal links to a handler that will produce a smooth scroll to their target instead of an instant jump. It also returns an API that you can use to call a smooth scroll yourself.

When content of a web page exceeds a page and visitors scroll down the web page, then having a button to smooth scroll to the top of the page is a good idea. jQuery scroll function made it very easy to create a such a button just by writing a few lines of code. jQuery scroll function checks if the document is scrolled and is greater than a given value, then shows the scroll to top button, if the page is not scrolled or scrolled to the top of the page, then it hides the button.

By the end of this article, you will be able to create your own smooth scroll to top button on any web page.

Smooth Scroll to the Top of the Page

HTML Code

The ID of the link element will be used to show the button and scroll to the top of the page.

CSS Code

The CSS code is displaying the button at the bottom-center of the page.

jQuery Code

The jQuery code checks if the value of the page scrolled down is greater than 50, then fadeIn() the button, when the button is clicked, then scroll the page to the top and fadeOut() then button.

Scrolling Smoothly

To make a smooth scroll, we will use jQuery animate function and assign the speed to scroll to the top of the page.

Resources

• jQuery FadeIn() and FadeOut functions

Demo

Scroll down the page and you will see the red up-arrow button at the bottom-center of the page.

The post Smooth Scroll To The Top of The Page – jQuery appeared first on Noor Ahmad Feroozi.

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:

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.

In this code for smooth scroll with JS, I am selecting the elements with the class navbar and anchor tags that are within that class. Whenever you click such elements, a function will be triggered with the name smoothscroll.

Define How Much To Scroll:

In the function smoothscroll, I am defining the pixel value that needs to be scrolled. Since, this cannot be an absolute value, you can make use of the offsetTop function. So, this line returns the offset value for the element being referred to.

Trigger The Scrolling Property Within The function:

behavior: 'smooth'

Smooth Scroll Plugin Jquery

With this code, you can trigger the property behavior and set it's value to 'smooth'. This means that you want to scroll smoothly.

This code will generate the same results as from JavaScript.

So with this, are we done with our options of creating a smooth scroll in the page? Well, no! Apart from CSS and JavaScript, we still have another method, smooth scroll with JQuery.

How To Create Smooth Scroll With JQuery?

Jquery is yet another method that gives us the liberty to implement smooth scrolling with even more control than JavaScript. Implementing a smooth scroll with Jquery allows us to control the time it should take to scroll to the target element. In other words, you can manage the speed of scrolling.

Before referring to the following code for a smooth scroll in Jquery, make sure you have no other code that influences the scrolling behavior of the web page.

Taking this snippet and connecting back to the steps I mentioned above, we get the following:

Detect The Element

In this code, I am selecting all the anchor tags located within the class named navbar. For all such elements, a function will be triggered when they are clicked.

Define How Much To Scroll

The above code for smooth scroll in Jquery calculates the offset of the attribute with 'hash' and returns the pixel value back.

The value 1300 refers to the time in milliseconds that I want the web page to take before reaching the target location i.e. window.location.hash.

This code for smooth scroll in Jquery generates the following output:

Wrapping It Up!

Scroll-behavior is the property of the CSS that allows a page to scroll smoothly or abruptly when a link is clicked (although this can be extended to any element via JS). This can be achieved through three methods that are through direct styling in the CSS, through JavaScript, and through JQuery. Although there are tons of plugins that are available in JavaScript which can also be used for similar results. Deciding which way to go depends totally on the web developer and the requirements.

If Opera and Safari are not in your browser matrix and you don't need more control over the scroll event, you can use the smooth scroll with the CSS method. But that is hardly the case. Every web developer wants to target a maximum audience and therefore I recommend using a smooth scroll with JS method, as it is simple and gives more control although smooth scroll with JQuery offers some more features on the plate.

You can use any of them as per your comfort level. Whatever the developer decides, it is always better to have a smooth scroll on your website. I have never seen a dissatisfied customer using the smooth-scroll property. So, it is better to learn than skip this property on your web page. Also, make sure that you perform cross browser testing over your browser matrix to ensure browser compatibility support of the feature.

If you have used something unique with scroll property, do comment below to help all the fellow developers learn and experiment more. I hope you liked this article on a smooth scroll with Jquery, JS, and CSS. Feel free to share this article with your peers on Twitter, LinkedIn, or any other social media of your choice. That's all for now. Happy Testing!!!😄

Written by Harish Rajora

Fontdoctor 10 7 meters. I am a computer science engineer. I love to keep growing as the technological world grows. I feel there is no powerful tool than a computer to change the world in any way.

9922 Views | 19 Min Min Read

Smooth Scroll Jquery Codepen

53493 Views | 12 Min Min Read

63091 Views | 6 Min Min Read

Js Smooth Scroll

98305 Views | 13 Min Min Read