Saturday, March 16, 2013

Blog Tutorial Making Back To Top with Smooth Scroll Effect


"Back to Top" is one of the facilities that can be used on the blog to allow visitors to navigate pages on your blog.
Back To Top of functions that deliver you to the back end of the page. Use JQuery with this function can give better results scroll, in this case a more smooth scrolling or smooth. If you've not impatient want to make it immediately wrote dipraktekin ...

1. Log in to blogger.

2. Choose Design - Edit HTML

3. Put the following jquery script above the </ head>

     <script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

     <script src='http://blogtrikdantips-blogspot.googlecode.com/files/sed_back_to_top.js' type='text/javascript'/>

     <script src='http://vianjb.googlecode.com/files/to%20top.js' type='text/javascript'/>

     <script type='text/javascript'>

     $ (document). ready (function () {

     / *

     var defaults = {

     containerID: 'moccaUItoTop', / / id element fading

     containerHoverClass: 'moccaUIhover', / / element fading hover class

     scrollSpeed​​: 1200,

     easingType: 'linear'

     };

     * /

     $ (). UItoTop ({easingType: 'easeOutQuart'});

     });

     </ script>

5. Put the following code above the code]]> </ b: skin>

     # toTop {

     display: none;

     text-decoration: none;

     position: fixed;

     bottom: 10px;

     right: 10px;

     overflow: hidden;

     width: 51px;

     height: 51px;

     border: none;

     text-indent:-999px;

     top left no-repeat;

     }

     # toTopHover {

     left no-repeat-51px;

     width: 51px;

     height: 51px;

     display: block;

     overflow: hidden;

     float: left;

     opacity: 0;

     -moz-opacity: 0;

     filter: alpha (opacity = 0);

     }

     # toTop: active, # toTop: focus {

     outline: none;

7. Save your template and see the result.
Load disqus comments

0 komentar