Scrolling/Sliding Back to move past times Button widget volition brand your website to a greater extent than user friendly as it volition direct direct hold your user's to the move past times of the page smoothly.They don't bespeak to scroll past times them self alongside the assistance of mouse together with sliding bar on correct side.All they direct hold to produce is to click on a push clitoris together with they volition achieve the move past times of the page it volition non exclusively prophylactic the fourth dimension of the user's but likewise brand them comfortable together with the compatibility of the website volition move increased.Most of user would dear this widget every bit they scroll dorsum to move past times alongside lot of fun.so without wasting whatever much of fourth dimension allow us outset working.adding it is every bit elementary every bit writing H5N1 B C.
Adding H5N1 Sliding/Scrolling Back To Top Button Widget inward 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 honour 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 physician scrollbar is scrolled earlier showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document upward 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 inward 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 likewise deed every bit "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 straightaway 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 ingredient 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 inward 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 venture lucifer for IE6 together with below, summation 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 yous direct hold to chose the icon that yous desire to demo every bit dorsum to top,here are few images listed below merely chose whatever ane of the together with supervene upon it alongside Your Image Link
Important:you exclusively bespeak to re-create the url then don't re-create the icon merely url together with supervene upon it alongside Your Image Link
And later on changing the your icon link alongside the higher upward listed urls merely striking save button together with your piece of occupation is done
No comments:
Post a Comment