I want to have a button, and when you click on it, it will get you (the visitor) to the top of the page. 
How can this be done?
Thanks
            Asked
            
        
        
            Active
            
        
            Viewed 139 times
        
    -2
            
            
         
    
    
        Dave
        
- 21
- 
                    7I want the peace in the world. How can this be done ? – Alexis Nov 18 '16 at 08:41
- 
                    2then else where on the page Top of Page – Nov 18 '16 at 08:42
- 
                    3http://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript-jquery – Mahi Nov 18 '16 at 08:44
- 
                    @Alexis: Excellent comment. – Bhavik Shah Nov 18 '16 at 08:49
5 Answers
2
            
            
        The classic operation of hyperlinks is to point to a page different from the one being viewed, to navigate the site. It is also possible to create a link to a specific location on the current page, or to another page in order to position the browser correctly.
Creating an anchor is easy: you just have to assign the element to which you want to be able to point an identifier (with the attribute HTML id) and to associate a link starting with the character #, followed by the name of this Identifier.
Ex: 
<div id="top">...</div>
It is then enough to make a link to this anchor:
<a href="#top">top of page</a>
Demo:
<!DOCTYPE html>
<html>
    <head>
        <title>top link</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="top">...</div>
        <!-- Content -->
        <!-- Content -->
        <!-- Content -->
        <a href="#top">top of page</a>
    </body>
</html>
 
    
    
        Lefebvre Steeve
        
- 41
- 3
1
            
            
        You can do it like this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery Back To Top Button by CodexWorld</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">             </script>
  <script type='text/javascript'>
    $(document).ready(function(){ 
      $(window).scroll(function(){ 
       if ($(this).scrollTop() > 100) { 
        $('#scroll').fadeIn(); 
       } else { 
        $('#scroll').fadeOut(); 
      } 
     }); 
    $('#scroll').click(function(){ 
     $("html, body").animate({ scrollTop: 0 }, 600); 
     return false; 
    }); 
  });
  </script>
<style type="text/css">
/* BackToTop button css */
#scroll {
  position:fixed;
  right:10px;
  bottom:10px;
  cursor:pointer;
  width:50px;
  height:50px;
  background-color:#3498db;
  text-indent:-9999px;
  display:none;
  -webkit-border-radius:60px;
  -moz-border-radius:60px;
  border-radius:60px
  }
  #scroll span {
   position:absolute;
  top:50%;
  left:50%;
  margin-left:-8px;
  margin-top:-12px;
  height:0;
  width:0;
  border:8px solid transparent;
  border-bottom-color:#ffffff
 }
 #scroll:hover {
  background-color:#e74c3c;
  opacity:1;filter:"alpha(opacity=100)";
  -ms-filter:"alpha(opacity=100)";
 }
</style>
</head>
 <body>
   <!-- BackToTop Button -->
  <a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: inline;">Top<span></span></a>
     <!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->
    </body>
   </html>
Just Copy & Paste the script and run
 
    
    
        Amulya Kashyap
        
- 2,333
- 17
- 25
1
            
            
        For a link:
<a href="#">Back to top</a>
With button:
<a href="#">
    <button>Back to top</button>
</a>
See also:
 
     
    