Sunday, November 28, 2010

JQuery Scroll to top of Page Blogger Link

HTML Code:
(Widget text/javascript or add to an existent):

<a name="top"></a><a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#top" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1xO6T63kfCOEGazclHkhRA68HopiohKvocoBhmzvlCXR2gunIv7S7Sya1epDlmKgn55eGm8q3XJtr2T5Uv9UKSlhLA-01gt_mQXm00NfZXi8ZgMVY8jxAWx1ySu5DdXZO7vcxqvx2Rbw/" /></a>

---------

Edit Template - expand widgets

add below jquery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

this part:

<script type='text/javascript'>
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});</script>




For example the whole block in html edit with lightbox for blogger together:

<link href='http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});</script>
<script src='http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.min.js' type='text/javascript'/>


Demo on this side click on the right corner bottom


Back to top

No comments:

Post a Comment

English France German Spain Italy Dutch Russia Brasil Japan Korea Arabic China