There are many websites now a days with a button saying "Back To Top". When user clicks on it, browser automatically scrolls to the top of page in an animated format. If you are a web developer then you might know how this works? If not, then as per our knowledge it works with Jquery. Want to setup 'Scroll To Top' feature in your website? Read on.
You can also keep a Top in html5 by just adding a href="#top" to a link in footer where top will be an id of div tag in header. But the problem here is that you will not get animation while scrolling. To get animation is required. For this we have given a solution to scroll with animation with Jquery.
Please follow our simple steps to enable scroll to top feature in your website. Also please do not hesitate to ask questions via comments.
Please follow our simple steps to enable scroll to top feature in your website. Also please do not hesitate to ask questions via comments.
|
|
|
Steps To Add 'Scroll To Top' Feature In Your Web Page Using jQuery
- First open your html code in code editor such as Notepad++ or Dreamviewer, etc.
- Go to <head> section and paste the below code
<!-- Inside Head Section -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>
- Then go to body section and in footer section you can add the link with name Top (<a href="#top" id="top">Top</a>).
- You can even the background to Top link using CSS ( #top { width: 100%; background-color: black; height: 10px; } )
- For you we have given a test code below which you can apply and see effects.
Test Code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>
<body>
<a href="#top" id="top">Top</a> <!-- Top Link -->
</body>
</html>
Author : Shoeb Ahmad Fareed
Designation: Founder & CEO
Bio: A Technology Leninist who believes that success can only be achieved if one has a practical implementation knowledge. He is a Computer Science Engineer, a professional blogger and a debugger.
Bio: A Technology Leninist who believes that success can only be achieved if one has a practical implementation knowledge. He is a Computer Science Engineer, a professional blogger and a debugger.
