Friday, June 5, 2009

jQuery Scroll to Top Control v1.1

A blog page / site will sweep down. Moreover, the articles you write on the blog / site does not use Readmore. Of very tired when we have to scroll manually. If the page blog / site you lengthy, it's a good idea to provide viewers with an easy way to quickly / automatically scroll back to the top of the page.

Adding script with jQuery Scroll to Top Control v1.1, the control will display a stationary in the lower right corner of the window carefully when clicked on the page Scrolls back to the top. At times this practice, I use the arrow icon that I attach the script at jQuery before uploading Geocities.yahoo.com.

Please note that in addition to displaying stationary control, you can also specify a random anchor link on the page with the href value of special (ie: # top), which when clicked and the script Scrolls back to the top of the page.

Scroll to the bottom of the page (at least 100 pixels) to view a "Back to the Top" controls appear at the bottom right window, as in the Ayomaos this.

If you do not want to modify this script, then you just copy the code below:

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

<script type='text/javascript' src='http://www.geocities.com/nataludin5/scrolltopcontrol-1.js'>

/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>

Then add the script after <head>



If you are not satisfied with my modifications, you can adjust various things, such as the amount of time the backup script is required to scroll to the top, with the duration of fade in / out effect to control in scrolltopcontrol.js file, here is the relevant section to be modified :
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.gif" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //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
For "controlHTML", you can enter any HTML you want displayed as a control, but it must be something simple, such as an<img>, or even just plain text. Sample the following anchors in the HTML page also scroll the page back to top:

<a href="#top">Back to Top</a>

If you are not clear with my explanation, please visit at: http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
Blog Widget by LinkWithin

4 comments:

Dinoe said...

nice content...

car wallpapers said...

good posting bro..

orange said...

nice post and content . . .

Akmal Online said...

Ga ada screenshot nya ya di contoh hasilnya??

Post a Comment

Adsense Indonesia ads ads ads

Recent Comment

Follower

My friends

[A] • Abryan • Agnoe • Anied • Antiqueall [B] • bidikCOM • Budiawan H [C] • Catalog Tutorial [D] • Destiny • Djemari Ijal • Dorothy L [E] [F] [G] • Gemmasnewworld [H] • HEALTHINFO@EarthyMe [I] • iEn Muncet • Ihsan's Blog • Ikma Malaysia [J] [K] [L] [M] [N] • Nuranuraniku [O] • O-Range [P] [Q] [R] • Robbie's Blog [S] [T] • tiriBC • True Pillager [U] [V] [W] [X] [Y] [Z]