Button back to top or button back up , is a facility that we can post on a web page or blog in the form of a button that serves to return to the top page when the button we press, the goal is to allow visitors if they decide to go back to see or get to the point of beginning of the page, in the presence of facilities button back to top , and by pressing then the visitors will easily be brought back to the starting point of the page automatically (page scrolling or rolling your own), and is very effective when compared to those pages must be in scroll or manually rolled.
How the buttons back to the top or the back button above
generally t ombol back to top or button back up will function and automatically appear to us click when the content of articles already exceeded the height limit screen monitor, it means the button back to top appears to facilitate the article or page that is very long, so when it exceeds the limits of the screen, the button back to top will appear automatically and ready for us click it too if we decide to go back ka limit on the page, but for short pages and less than the size of the screen height button back to top will display, button layout back to top usually installed and appears in the right corner of the lower border of the page.
Along with the creativity of bloggers, is now widely available blogs serving how to install or manufacture of a button back to top with a variety of effects that look cool and awesome, there are made quite simple with no effect at all, then there is also the effect of the scroll, the pan, the effect of bounce even to effect fadding also effect smoth, and may also appear other effects due to the creativity of bloggers innovative.
to make the switch back to the top requires a script CSS HTML Javascript or JQuery
we need to know to make or install the button back to top or button back up on the blog that we have, it will not be separated from the web programming language name, usually making facilities widgets will not be separated from the 3 programming language CSS, Javascript or JQuery Framework and HTML script , all three languages collaborate? in accordance with their respective functions to create the facility cool widget can we put on a good blog is a blog berflatform blogspot and wordpress or pages private.Third script code does have the function of each, Script HTML to define tag html tags as a wrapper or the foundation of the web to be manipulated, the script CSS to decorate and events leading to the layout of each HTML tag that we defined, whereas javascript or jquery is to make the display more interactive.
How to create a button back to top with a variety of effects that you can choose
in this article we will discuss how to create or install and bring the key back to the top or the back it up with some effect in full as follows:1. How to Make the key back to top by bouncing effects (bounce)
bounce Securities means securities such as bouncing balls , when the screen rolls and has reached the point of beginning of the page, there is little effects like reflection of the ball , to apply please follow the steps below:a. Log into your blog template, look for the code save the following code right above
The above code is a framework jquery, if it is within your template has not been involved jquery code, please put the above code, if you have to skip
b. Create a new widget, select the widget's HTML / javascript then copy the following code and save
c. Copy the following jquery javascript code above the code also
2. Make the button back to top with smooth sliding effect upwards
remedy to make the button back to top which has the effect of sliding upwards subtly follow these steps:a. Log into your blog template, look for the code save the following code right above
b. Still above code put also the following code right above, the code below you can change the number 500 for the location of the button and the number 700 you can change to the speed
c. Create a new widget, select the widget's HTML / javascript then copy the following code and save
3. Creating a button back to top with Fading effects and smooth
fading effects and smooth is, visibilas which objects appear or disappear subtly, or known as fade in or fade out , for to make the button back to top with fading effects and smooth follow these steps:a. Log into your blog template, look for the code save the following code right above
?
you can skip the laying of the above code in your blog if you already are? jquery
b. Ggunakan gadget HTML / Javascript then copy the following script and then do not forget to save
var scrolltotop = {? ??? setting: {startline: 100, scrollTo: 0, scrollduration: 1000, fadeduration: [500, 0]}, ??? controlHTML: '
', ??? controlattrs: {offsetx: 5, offsety: 5}, ??? anchorkeyword: '#top', ??? state: {isvisible: false, shouldvisible: false}, ??? scrollup: function () {??????? if (! this.cssfixedsupport) ??????????? this. $ control.css ({opacity: 0}) ??????? var dest = Isnan (this.setting.scrollto)? this.setting.scrollto: parseInt (this.setting.scrollto) ??????? if (typeof dest == "string" && jQuery ( '#' + dest) .length == 1)? ??????????? 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 this.state.isvisible && == false) {??????????? this. $ control.stop (). animate ({opacity: 0}, this.setting.fadeduration [1]) ??????????? this.state.isvisible = false ??????? } ??? }, ??? ??? init: function () {??????? jQuery (document) .ready (function ($) {var mainobj ??????????? ??????????? var = scrolltotop iebrws = document.all ?????? ????? mainobj.cssfixedsupport =! iebrws iebrws && || == document.compatMode "CSS1Compat" && // window.XMLHttpRequest not IE or IE7 + browser in standards mode ??????????? mainobj. $ body = (window.opera)? (document.compatMode == "CSS1Compat"? $ ( 'html'): $ ( 'body')): $ ( 'html, body') ???????? ??? mainobj. $ control = $ ( '' + mainobj.controlHTML + '') ??????????????? .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 ()! = '') // special version of IE6 down to loose check, also to see whether the control contains text ??????????????? mainobj. $ control.css ({width: mainobj. $ control.width ()}) // IE6- should be set so that the container witdh clear text form with a neat ??????????? mainobj.togglecontrol () ??????????? $ ( 'A [href="' + mainobj.anchorkeyword +'"]'). Click (function () {??????????????? mainobj.scrollup () ?????????????? ? ??????????? return false}) ??????????? $ (Window) .bind ( 'scroll resize', function (e) {??????????????? mainobj.togglecontrol () ???????????}) ??????? }) ??? }} Scrolltotop.init () In the above script you please replace the words "Image URL Back to Top" picture location back to top you have or replace just the images following url:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPK_KilzGdd8l97hyAVTFMiOzw0efccJW06dpiRABpYzbb0X8G8dgsehK8vLgrJ5Y9lwOseN4LKU45ryL5anodcEJK2x0gS2bO7LjaQzAX5JzNqyjuYR80dMwql3GMRCc8NWaNxDkWwlpj/s10/arrow-up_basic_blue.png
Read also: How to create a widget like facebook floating ala strukturkode?
So that I can share about How to Make the button back to top with a variety of options effect complete, good luck and hopefully useful .
0 Komentar