You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 A Special BackToTop on Fri Aug 24, 2012 8:43 pm

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

View user profile

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

 


Sitemap
FreshArtz
FreshArtz © 2012
Design by Verrell123
Donate
Demo Page

About
We are Web Design and Coding forum, we will help member how to coding and design website, there many category about web design and coding.