In some websites, you can see that when you scroll the page there is a link at the bottom of the page with text "Scroll to Top" and when you click on this link page moves to the top of the page. If you web page has lots of content, It is a very good idea to provide visitors within a easy way to quickly go to the top of the page.
In this article, we will create a page scrolling effect for returning to the top of the page using jQuery.
In previous posts, I explained Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to jQuery, Java Script etc.
For creating a page scroller, we will add a button at a fixed position on the bottom right of the page, so when we click it , it scroll up to the top of page with some animation.
So lets start it, First add the button on the page
Now add the following CSS on the head section of the page for the above button
Here you can see that I have fixed the position of button which is 5px from right and 5px from bottom. display: none will make the button invisible initially.You can change the above CSS according to your requirement.
Now we want to visible the button when the page is scroll down. We can do this using jQuery scroll event.
Now add the click event to the button to scroll the page to top. We can do this using jQuery as shown below.
The scrollTop:0 scrolls to very top of the page. Below is the complete code of jQuery and CSS in web page.
I hope this article will be helpful for you. I would like to have any feedback from you. Your valuable feedback, question, or comments about this article are always welcome.
In this article, we will create a page scrolling effect for returning to the top of the page using jQuery.
In previous posts, I explained Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to jQuery, Java Script etc.
For creating a page scroller, we will add a button at a fixed position on the bottom right of the page, so when we click it , it scroll up to the top of page with some animation.
So lets start it, First add the button on the page
<a href='#' id='toTop'>^ Scroll to Top</a>
Now add the following CSS on the head section of the page for the above button
<style type="text/css">
#toTop
{
background: none repeat scroll 0 0 #B34C00;
border: 2px solid #ffffff;
bottom: 5px;
color: #FFFFFF;
cursor: pointer;
padding: 10px;
position: fixed;
right: 5px;
text-align: center;
display: none;
display: none;
text-decoration: none;
width: 100px;
}
</style>
Here you can see that I have fixed the position of button which is 5px from right and 5px from bottom. display: none will make the button invisible initially.You can change the above CSS according to your requirement.
Now we want to visible the button when the page is scroll down. We can do this using jQuery scroll event.
// add function on scroll event of
window to show and hide the link
$(window).scroll(function
() {
if ($(window).scrollTop() == "0")
{
$("#toTop").fadeOut("slow")
}
else {
$("#toTop").fadeIn("slow")
}
});
Now add the click event to the button to scroll the page to top. We can do this using jQuery as shown below.
// Add click function to link for
scroll the page on top
$("#toTop").click(function () {
$("html, body").animate({ scrollTop: 0 }, "slow");
});
The scrollTop:0 scrolls to very top of the page. Below is the complete code of jQuery and CSS in web page.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="ScrollToTop.aspx.cs"
Inherits="TestOCRReader.Styles.ScrollToTop"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function () {
//hide the "Scoll to Top" link
$("#toTop").hide().removeAttr("href");
// Add click function to link for scroll the page on
top
$("#toTop").click(function () {
$("html, body").animate({
scrollTop: 0 }, "slow");
});
// add function on scroll event of window to show and
hide the link
$(window).scroll(function () {
if ($(window).scrollTop() == "0") {
$("#toTop").fadeOut("slow")
}
else {
$("#toTop").fadeIn("slow")
}
});
});
</script>
<style type="text/css">
#toTop
{
background: none repeat scroll 0 0 #B34C00;
border: 2px solid #ffffff;
bottom: 5px;
color: #FFFFFF;
cursor: pointer;
padding: 10px;
position: fixed;
right: 5px;
text-align: center;
display:none;
text-decoration: none;
width: 100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 1000px">
<p>
Demo of Scroll to Top</p>
<p>
To see the Scroll To Top Link scroll the page.</p>
</div>
<!-- Anchor tag for Scroll the page to top-->
<a href='#' id='toTop'>^ Scroll
to Top</a>
</form>
</body>
</html>
I hope this article will be helpful for you. I would like to have any feedback from you. Your valuable feedback, question, or comments about this article are always welcome.
No comments:
Post a Comment