Get our posts emailed to you with our monthly newsletter, subscribe here.
- Smooth Page Scrolling Js App
- Smooth Page Scrolling Js Word
- Smooth Page Scrolling Js Plugin
- Smooth Page Scrolling Js Bootstrap
The scrolling comes in the picture when either one uses one's mouse wheel to scroll a page or uses the scroll bars. Now in the case of without the Scrolling Effect the page is simply scrolled but the magic happens when you have this effect attached to the page. This effect can change the speed of page scrolling or numbers of pixels to scroll. I have a couple of hyperlinks on my page. A FAQ that users will read when they visit my help section. Using Anchor links, I can make the page scroll towards the anchor and guide the users there. Note: the scroll magic comes from scroll-behavior: smooth;, the rest of the CSS styling above is purely cosmetic. To smoothly scroll the user from the top to the bottom of the page when users click on Scroll to Bottom add the following JavaScript code.
In this post I will walk through the tutorial showing you how to create a smooth page scrolling effect allowing you to scroll to the top or bottom of your web page in a smooth action using jQuery.
Try this smooth scrolling demo, or an algorithm like: Get the current top location using self.pageYOffset; Get the position of element till where you want to scroll to: element.offsetTop; Do a for loop to reach there, which will be quite fast or use a timer to do smooth scroll till that position using window.scrollTo. Allows a straight jump 'scroll effect' between elements within the scrolling box. This is default: smooth: Allows a smooth animated 'scroll effect' between elements within the scrolling box. Initial: Sets this property to its default value. Read about initial: inherit: Inherits.
If you are not sure what animation I am referring too, then take a look at the demo first. You will see a link at the top of the page called ‘Scroll to bottom‘ and a link at the bottom of the page called ‘Scroll to top’. Both of these links will allow you to scroll smoothly to either the top or bottom of the web page.
How it works
First we need to include jQuery before the closing </head> tag in our web page, for the demonstration I have used this method:
[php]<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>[/php]jQuery Scroll to bottom:
First I place the link in my page to tell the user to ‘Scroll to bottom’, when this is clicked the page will smoothly scroll.
The link:
[php]<a href='#'>Scroll to bottom</a>[/php]![Smooth Page Scrolling Js Smooth Page Scrolling Js](https://www.jqueryscript.net/images/jQuery-Based-One-Page-Scroll-Web-Template-smooth-scroll-js.jpg)
The jQuery:
[php]<script type='text/javascript'>$(document).ready(function(){
Edgeview 2 0 – cutting edge image viewer. // Scroll page to the bottom
$(‘a.scrollToBottom’).click(function(){
$(‘a.scrollToBottom’).click(function(){
$(‘html, body, .content’).animate({scrollTop: $(document).height()}, 300);
return false;
});
})
</script>
[/php]
})
</script>
[/php]
How it works:
If your new to jQuery then all our first line of code is doing is checking the page has loaded before the remaining code is executed –
[php]$(document).ready(function(){[/php]The next line will execute the code contained inside the {} brackets when the link with the class ‘scrollToBottom’ is clicked.
[php]$(document).ready(function(){$(‘a.scrollToBottom’).click(function(){
});
})
[/php]
})
[/php]
Within this function we then insert this code –
[php]$(‘html, body’).animate({scrollTop: $(document).height()}, ‘slow’);return false;
[/php]
[/php]
It is fairly self explanatory to see what is happening with the code above, when a link with the class ‘scrollToBottom’ is clicked the code inside the function will run, the smooth scroll effect is created using the scrollTop function. The code above will scroll to the bottom of the page, using the height of window to determine the bottom. The speed of this is controlled using ‘slow’, ‘medium’ and ‘fast’ speed controls, I used ‘slow.
jQuery Scroll To Top
First, insert a link into the footer section of of your homepage , when this is clicked the jQuery code will execute the .animate function. The class applied to the link is very important as it is referenced in the jQuery.
The link:
[php]<a href='#'>Scroll to bottom</a>[/php]The jQuery:
![Jquery Jquery](https://alligator.io/images/js/smooth-scrolling.png)
Smooth Page Scrolling Js App
[php]<script type='text/javascript'>$(document).ready(function(){
$(‘a.scrollToTop’).click(function(){
$(‘html, body’).animate({scrollTop:0}, ‘slow’);
return false;
});
})
</script>
[/php]
</script>
[/php]
Smooth Page Scrolling Js Word
How it works:
When the page has loaded and the link with the class .scrollToTop has been clicked jQuery will execute this –
[php]$(‘html, body’).animate({scrollTop:0}, ‘slow’);return false;
[/php]
[/php]
The
.animate()
method allows us to create animation effects on any numeric CSS properties, the scrollTop function is set to 0, this represents the scroll bar being at the very top position and ‘slow’ represents the speed at which the animation will run at.You will have noticed this line:
[php]<code>return false;</code>[/php]This prevents the default action of the event being triggered, in our case it prevents the user following the link.
This also could have been used:
Smooth Page Scrolling Js Plugin
[php]event.preventDefault();[/php]However I found using this caused the animations to be anything but smooth.