Maybe it's many scattered on the internet on how to install the tutorial back to top button on the blog and this time I will share tips on the tutorial.
The role and function of the button back to top itself is quite important which makes it easy for visitors who wish to return to top of page mengscroll by just clicking one button.
Note: If the existing template back to top button, please remove it first.
The following installation methods:
1 Log in to Blogger Dashboard> select blogs> select Template> then click Edit HTML, save the following code after the <head> or before </ head>
HTML
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>If your template is mounted Fontawesome above, ignore the first step up to the next step.
2 Keep CSS below before ]]> </ b: skin> or </ style>
CSS
.smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow:hidden; text-align:center; z-index:99; background-color:#2ba6e1; color:#fff; width:47px; height:44px; line-height:44px; right:25px; bottom:-25px; padding-top:2px; border-radius:5px; transition:all 0.5s ease-in-out; transition-delay:0.2s;}.smoothscroll-top:hover { background-color:#3eb2ea; color:#fff; transition:all 0.2s ease-in-out; transition-delay:0s;}.smoothscroll-top.show { visibility:visible; cursor:pointer; opacity:1; bottom:25px;}.smoothscroll-top i.fa { line-height:inherit;}3. Simpan jQuery dan HTML di bawah ini sebelum </body>
SCRIPT
<div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span></div><script type='text/javascript'>//<![CDATA[$(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop);}); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');}//]]></script>4 After that save the template and see the results.
With the addition of the bounce effect
SCRIPT
<div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span></div><script type='text/javascript'>//<![CDATA[$(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop);}); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);}//]]></script>
For color settings and others can edit again according to taste, so from me. Good morning and hopefully useful.
0 commentaires:
Enregistrer un commentaire