If you want to add a goto top button to your wordpress blog /website here i m sharing they how can u do it , its simple and easy you need to add a bit of code to your widget. The benefit of Go To Top , Back To top or Scroll To Top button is that when ever you have a post/page having lot of content (text , images etc) and the page go to very down it become little boring for the visitor to scroll back to top most of the site have lot of post at their Home page so its difficult to scroll up. In this post we are adding some sort of code which not only have the function to back to the top but also have cute floating effect, when you are at the top of the page it is don't appears , then when you scroll down a little of the page it start appearing on the down left side of your page and when you click on it. It got you to the top with a cool jQuery effect. To check the demo you need to scroll a little to the down of this page.
Adding Back To Top Button
Follow the steps to add it to your blog /website.
1 . Login to your wordpress dashboard.
2 . Navigate to
Appearance > Widgets.
3 . Drag a Text Widget (Arbitrary text or HTML ) to your sidebar.
4 . Add below code to it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
// < ![CDATA[
// < ![CDATA[
//
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code
***********************************************/
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/s400/Back-to-top.png"-->', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('
<div id="topcontrol">'+mainobj.controlHTML+'</div>
')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
// ]]>
// ]]>
// ]]></script>
5 . Click
Save
By Default we have put an image ->
that is used in the code so you don't need to specify the image link however if you don't like that image you can change it by simply changing below link to your one
http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/s400/Back-to-top.png
upload the image to your site that you want to have for go to top button. and specify the link in the code.
Here are some images you may want to use one of them for your site / blog.
Hope you like the post.
User Tags :-
Animated scroll to top button , Add scroll to top button to wordpress , back to top for wordpress , go to top for wordpress , wordpress back to top , back 2 top
Related
