Scrolling/Sliding Back to move past times Button widget volition brand your website to a greater extent than user friendly as it volition straight accept your user's to the move past times of the page smoothly.They don't require to scroll past times them self amongst the aid of mouse together with sliding bar on correct side.All they cause got to create is to click on a push clit together with they volition make the move past times of the page it volition non exclusively condom the fourth dimension of the user's but too brand them comfortable together with the compatibility of the website volition hold upwards increased.Most of user would honey this widget equally they scroll dorsum to move past times amongst lot of fun.so without wasting whatever much of fourth dimension permit us commencement working.adding it is equally uncomplicated equally writing H5N1 B C.
Adding H5N1 Sliding/Scrolling Back To Top Button Widget inwards Blogger.com
1.Go to Blogger.com >>Your Blog>>Layout>>Add H5N1 Gadget>>HTML/JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified past times www.MyBloggerTricks.com
* This uncovering MUST remain intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for total source code
***********************************************/
var scrolltotop={
//startline: Integer. Number of pixels from move past times of Dr. scrollbar is scrolled earlier showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document upwards when command is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="Your Image Link" />', //HTML for control, which is machine wrapped inwards DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of command relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should too human activity equally "Scroll Up" linksstate: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if command is positioned using JavaScript
this.$control.css({opacity:0}) //hide command straight off later on clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check chemical cistron laid past times 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)? truthful : 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=scrolltotopvar iebrws=document.allmainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers inwards standards modemainobj.$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(); provide false}).appendTo('body')if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose banking concern jibe for IE6 together with below, addition whether command contains whatever textmainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing textmainobj.togglecontrol()$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){mainobj.scrollup()provide false})$(window).bind('scroll resize', function(e){mainobj.togglecontrol()})})}}scrolltotop.init()</script>
Customization of the widget (Important) According to your Satisfaction:
Now you lot cause got to chose the ikon that you lot desire to demonstrate equally dorsum to top,here are few images listed below simply chose whatever i of the together with supervene upon it amongst Your Image Link
Important:you exclusively require to re-create the url together with thus don't re-create the ikon simply url together with supervene upon it amongst Your Image Link
And later on changing the your ikon link amongst the inwards a higher house listed urls simply hitting save button together with your piece of job is done
No comments:
Post a Comment