Scroll Page Back To Top With jQuery
Admin
Making a decent client experience on your site is critical to keep individuals on the page.
The most ideal approach to make a decent client experience is to make it simple for
individuals to utilize; if your site is hard to utilize, it bothers individuals and they will proceed
onward.
For sites that have a great deal of data on the page, you will need to scroll far down the
For sites that have a great deal of data on the page, you will need to scroll far down the
page to access the information. Sites like Google+ with infinite scrolling can be irritating if
you need to go back to the top of the page to click on a link there. You can either refresh
the page or scroll the scrollbar all the way back to the top.
Sites with long scrolling require a mechanism to easily return to the top. This is done with
Sites with long scrolling require a mechanism to easily return to the top. This is done with
a button which will scroll them back to the top.
In this tutorial, you will learn how to create an animated "back to top" button with jQuery.
In this tutorial, you will learn how to create an animated "back to top" button with jQuery.
The jQuery toTop.js is an ultra-light jQuery back-to-top plugin which enables an element
to smoothly scroll back to the top of the page at a given speed.
If you want to see the result, check out the demo.:
1. Make a back to top button at the bottom of the page.
2. Import jQuery library and the jQuery toTop.js content into the page.
3. Activate the back to top button.
4. Style the back to top button as you like.
<div class="totop">↑ To Top</div>
2. Import jQuery library and the jQuery toTop.js content into the page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script
src="https://rawgit.com/FeedBlogz/fb/master/Scroll-Page-jQuery-totop.min.js">
</script>
Warning message: If you already have jQuery on your page, you shouldn't include
it a second time
3. Activate the back to top button.
$('.totop').tottTop();4. Style the back to top button as you like.
.totop {
position: fixed;
bottom: 50px;
right: 50px;
cursor: pointer;
display: none;
background: #a05b7e;
color: #fff;
border-radius: 25px;
height: 50px;
line-height: 50px;
padding: 0 30px;
font-size: 18px;
}
You can change whatever you like (position - left or right - background color - font size - border, etc.).
5. Set the scroll animation duration.
6. Set the show and hide button duration.
7. Set the distance from the top of the page to reveal the back to top button.
5. Set the scroll animation duration.
$('.totop').tottTop({
duration: 1000
});6. Set the show and hide button duration.
$('.totop').tottTop({
scrollTopBtnDuration: 400
});7. Set the distance from the top of the page to reveal the back to top button.
$('.totop').tottTop({
scrollTop: 1000
});Full code will be like this:
If you have any problem, try to place the "" code either under or below the tag.
If everything looks fine and there are no problems, I will be happy to help you achieve your goals.
If everything looks fine and there are no problems, I will be happy to help you achieve your goals.