Hello Guest,
This tutorial is © BY Mycoding - Please don't copy this special tutorial anywhere

Option 1
Reading - Slowest back to top
JS Code:

Code:

var CopyrightNotice='Special Backtotop, made by Nathan Adhitya. Copyright © by MYCoding. All Rights Reserved. Use and/or modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. Absolutely no distribution without written consent from Nathan Adhitya.';
$(document).ready(function(){
   $("#backtotop").hide();
   $(function () {
      $(window).scroll(function () {
         if ($(this).scrollTop() > 250) {
            $('#backtotop').fadeIn();
         } else {
            $('#backtotop').fadeOut();
         }
      });

      $('#backtotop').click(function () {
         $('body,html').animate({
            scrollTop: 0
         }, 10000);
         return false;
      });
   });

Just remember this uses $(function) so you can add many more lines as much as you want
Then The HTML:
<div id="backtotop">^</div>
Then makesure you have an jquery.min.js attached if not attached add this code

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Then the special CSS

Code:


#backtotop {
right: 20px;\*Editable the position*\
cursor: pointer;
margin: 0px 0px 0px 0px;
position: fixed;
bottom: 10px;\*Editable the position*\
font-size: 90%;\*Editable the Font Size*\
padding: 10px;
width: 100px;\*Editable the width*\
text-align: center;
background-color: #000;\*Editable the Backround colors*\
border-radius: 8px;\*Editable the something like a special border*\
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.4;
color: #FFF;
font-size: 14px;\*Editable the font size*\
z-index: 1000;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 0.5s;
    -moz-transition:0.5s;
    -o-transition: 0.5s;
    -htm-transition: 0.5s;
    -webkit-transition: 0.5s;
}
#backtotop:hover {
{
border:2px solid green; \*Editable - Border*\
opacity:0.9 \*Editable - Opacity when animated hover*\
}

Long Page - Fast,nice animated back to top
JS Code:

Code:

var CopyrightNotice='Special Backtotop, made by Nathan Adhitya. Copyright © by MYCoding. All Rights Reserved. Use and/or modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. Absolutely no distribution without written consent from Nathan Adhitya.';
$(document).ready(function(){
   $("#backtotop").hide();
   $(function () {
      $(window).scroll(function () {
         if ($(this).scrollTop() > 800) {
            $('#backtotop').fadeIn();
         } else {
            $('#backtotop').fadeOut();
         }
      });

      $('#backtotop').click(function () {
         $('body,html').animate({
            scrollTop: 0
         }, 1200);
         return false;
      });
   });

Just remember this uses $(function) so you can add many more lines as much as you want
Then The HTML:
<div id="backtotop">^</div>
Then makesure you have an jquery.min.js attached if not attached add this code

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Then the special CSS

Code:


#backtotop {
right: 20px;\*Editable the position*\
cursor: pointer;
margin: 0px 0px 0px 0px;
position: fixed;
bottom: 10px;\*Editable the position*\
font-size: 90%;\*Editable the Font Size*\
padding: 10px;
width: 100px;\*Editable the width*\
text-align: center;
background-color: #000;\*Editable the Backround colors*\
border-radius: 8px;\*Editable the something like a special border*\
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.4;
color: #FFF;
font-size: 14px;\*Editable the font size*\
z-index: 1000;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 0.5s;
    -moz-transition:0.5s;
    -o-transition: 0.5s;
    -htm-transition: 0.5s;
    -webkit-transition: 0.5s;
}
#backtotop:hover {
{
border:2px solid green; \*Editable - Border*\
opacity:0.9 \*Editable - Opacity when animated hover*\
}

Option 3
Medium - For Extra-fast reading back to top
JS Code:

Code:


var CopyrightNotice='Special Backtotop, made by Nathan Adhitya. Copyright © by MYCoding. All Rights Reserved. Use and/or modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. Absolutely no distribution without written consent from Nathan Adhitya.';
$(document).ready(function(){
   $("#backtotop").hide();
   $(function () {
      $(window).scroll(function () {
         if ($(this).scrollTop() > 250) {
            $('#backtotop').fadeIn();
         } else {
            $('#backtotop').fadeOut();
         }
      });

      $('#backtotop').click(function () {
         $('body,html').animate({
            scrollTop: 0
         }, 8000);
         return false;
      });
   });

Just remember this uses $(function) so you can add many more lines as much as you want
Then The HTML:
<div id="backtotop">^</div>
Then makesure you have an jquery.min.js attached if not attached add this code

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Then the special CSS

Code:


#backtotop {
right: 20px;\*Editable the position*\
cursor: pointer;
margin: 0px 0px 0px 0px;
position: fixed;
bottom: 10px;\*Editable the position*\
font-size: 90%;\*Editable the Font Size*\
padding: 10px;
width: 100px;\*Editable the width*\
text-align: center;
background-color: #000;\*Editable the Backround colors*\
border-radius: 8px;\*Editable the something like a special border*\
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.4;
color: #FFF;
font-size: 14px;\*Editable the font size*\
z-index: 1000;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 0.5s;
    -moz-transition:0.5s;
    -o-transition: 0.5s;
    -htm-transition: 0.5s;
    -webkit-transition: 0.5s;
}
#backtotop:hover {
{
border:2px solid green; \*Editable - Border*\
opacity:0.9 \*Editable - Opacity when animated hover*\
}

Demo is not available

This tutorial is Copyrighted © BY Mycoding please do not copy this without copyright notice