Click here to Skip to main content
12,077,753 members (48,325 online)
Click here to Skip to main content
Add your own
alternative version

Stats

8.3K views
9 bookmarked
Posted

How To Implement Back To Top Feature in Html/Asp.Net/PhP

, 6 May 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Friends, In many websites having long contents we have seen a “Back To Top” or “Scroll To Top” button when clicked takes you to the top of the webpage. We see this kind of feature normally on the product listing pages of e-commerce websites. Today in this post we will impleme

Friends,

In many websites having long contents we have seen a “Back To Top” or “Scroll To Top” button when clicked takes you to the top of the webpage. We see this kind of feature normally on the product listing pages of e-commerce websites. Today in this post we will implement the same feature in one of the easiest possible way. To integrate this feature, we need a little HTML, some CSS  for styling and a couple of lines of jQuery code. Using the below method, you can integrate the “Back To Top” feature on your website irrespective of the programming language of your website, be it ASP.Net or PhP.

To start with, we will create a HTML page with the following content in the <body> section.

<body>
<h1>Back To Top Demo by Nitesh Luharuka</h1>
<div style="height:1000px"></div>
<span id="back-to-top"><img src='images/up-arrow.png'/></span>
</body>

If you notice the above, we have added a div with some height to test our feature. At the end, we have added a “<span>” tag having an image of upward arrow. This arrow will be shown once the user starts scrolling down. To position the image, we will use a bit of CSS. Here’s the CSS for the button. You need to add this in the head section of your page.

#back-to-top
{
     position: fixed;
     bottom: 30px;
     top: 350px;
}
#back-to-top img
{
    cursor:pointer;
}

Now, our HTML is ready and for adding the code to the image, we will write the below code in our <head> section of the page. If you’ve already included jQuery, then you do not need to include jQuery file again in your project.

<script type="text/javascript">
        $(document).ready(function () {
            //Hide Back to top button
            $("#back-to-top").hide();
            $(window).scroll(function () {
                if ($(window).scrollTop() > 200) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });
            $('#back-to-top img').click(function () {
                $('body').animate({
                    scrollTop: 0
                }, 1000);
            });
        });
    </script

In the code above, we have done few things. Let me explain them one by one

  • 1st of all, we hide the image when the document loads.
  • In the scroll() event handler, we have ensured that as the user starts scrolling and has scrolled 200px (you can change this), the “Back To Top” image becomes visible to the user.
  • In the click() event handler of the button, we send the user back to the top of the page using a nice animation effect of jQuery.

Hope you like this post. Keep learning and sharing!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nitesh Luharuka
Team Leader Director @ Rebin Infotech
India India
An Independent IT Professional and Consultant on MS Technologies like .Net | MVC | Silverlight | Sharepoint | MS Project Server along with open source CMS Systems like DotNetNuke etc.

I am an enthusiastic technocrat who love to debug problems and solve them. I love writing articles on my website in my spare time. Please visit my Website for more details and subscribe to get technology related tips/tricks.

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160212.1 | Last Updated 7 May 2014
Article Copyright 2014 by Nitesh Luharuka
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid