Skip to main content

Scroll to top or Back To Top Button for website


Scroll to top or Back To Top Button for website




This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages.











This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed during scrolling.

If users keeps on scrolling, the button nicely reduces its opacity to be less distracting during navigation.




Creating the structure




We inserted the “Back to top” link at the bottom of our content, before the closing tag.




<body>
	<!-- all your content here -->
 
	<a href="#0" class="cd-top">Top</a>
 
	<!-- link to scripts here -->
</body>




Adding style




The link will appear fixed on the right-side of the content. Initially it has a visibility:hidden;

 and an opacity:0;.

Both visibility and opacity are controlled through two classes: .cd-is-visible and .cd-fade-out.




.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}




These classes are added (or removed) to the “Back to top” link using jQuery.




Events handling




In our .js file, we have defined three variables to control the “Back to top” link appearance:



//browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
	//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
	offset_opacity = 1200,
	//duration of the top scrolling animation (in ms)
	scroll_top_duration = 700;




The offset variable will be used to toggle the class .cd-is-visible; the offset_opacity, instead, to add the .cd-fade-out class.

The top scrolling function is implemented using the jQuery .animate() method, and bound to the “Back to top” click event.




Conclusion




I hope this article will helpful for you. If you need any help, please feel free to ask any question or If you have any suggestion, Leave a comment below











Labels:

Comments

Post a Comment

Feel free to leave your message here.

Popular posts from this blog

Windows 7 Home Premium 32 Bit free download Direct Link

People often ask us which version of Windows they should purchase for their new PC build. Generally speaking Windows 7 Home Premium Edition has everything that most end users would need for normal day-to-day usage of their PC. There is no use in paying extra for Windows 7 Professional Edition if the added features will be of no benefit to you. Here is a list of the major differences between Windows 7 Home Premium and Windows 7 Professional. Memory support Home Premium:  16GB of physical memory supported Recent tests of a mid range Windows 7 based PC with configurations of 4GB, 8GB and 16GB of system memory have shown only a marginal overall performance benefit between 8GB and 4GB. No performance improvement was evident when moving from 8GB to 16GB, therefore I do not see the 16GB physical memory limitation of Home Edition to be an issue when choosing an operating system. Backup and restore Home Premium:  Limited to local HDD or DVD The Backup and Restore centre was first int...
Post a Comment
Read more

Making a Really Cool jQuery Image Gallery

jQuery Image Gallery In this tutorial we will create a beautiful jQuery Image Gallery for website using jQuery Lightbox plugin.You can use this gallery in your website or you can show images.One of the main benefits of using a popular java script library, such as jQuery, is the incredible number of available plug-ins that will kick-start any development project. There is no need to Download the plug-in – I’ve included it in the demo files, so grab them and get on reading. The XHTML We start off with our XHTML front-end. demo.php <div id="container"> <div id="heading"> <!-- the heading --> <h1>A cool jQuery gallery</h1> </div> <div id="gallery"> <!-- this is the containing div for the images --> <?php //our php code goes here ?> <div class="clear"></div> <!-- using clearfix --> </div> <div id="footer"> <!-- some tutorial info --> </div...
Post a Comment
Read more

How to Build a Professional Website /Learn how to build website

Build a professional website ,and earn money using your website .Learn all these all lessons step by step.Y ou will learn how to structure a web page using HTML , style a web page using CSS , and how to do all of this quickly using Bootstrap . Build the Airbnb home page and learn the fundamentals of web developmen t in the process.You will learn how to structure a web page using HTML , style a web page using CSS , and how to do all of this quickly using Bootstrap. What you will learn You will learn how to structure a web page using HTML, style a web page using CSS, and how to do all of this quickly using Bootstrap. We had done worked hard on this topic  please give us  like  &  Share  Credit..                 If you want to save your work then follow these instructions:- 1.Select 1st lesson if you are beginner 2.SignIn option is given on the header of these lessons.Click SignIn 3.SignIn using Facebook Acco...
Post a Comment
Read more