How To Integrate jQuery Scroll To Top Control in WordPress
5th Mar 2010 | Posted by Eko S. | 45 CommentsScroll to top is a button that hovers in the bottom right corner of your screen that allow users to smoothly scroll right to the top of page, making a website more user friendly.
A study done by the US government in which anchor links were used at the top of the page found the following: On a long page with a large amount of information, having the content headings as links at the top of the page allows users to click to information directly, reducing scrolling and scanning.
How To?
In this article we will integrate script jQuery scroll to top in wordpress manually.
Credit : Thanks to Dynamic Drive for this great script.
These 3 (three) simple steps to do :
Step 1. Download then Upload The Script
You should download below :
-
(Update : 12th Mar 2010)
scrolltopcontrol.js (3.7 KiB, 2,519 hits) -
Right click, save as in your local computer, then upload scrolltopcontrol.js to your site in folder theme, in “wp-contents/themes/yourthemes/”
also Upload the image in “wp-contents/themes/yourthemes/images“.
Step 2. Open and Customize scrolltopcontrol.js
Open that script : scrolltopcontrol.js
You can customize a variety of things, such as the amount of time it takes the script to scroll back up to the top, duration of the fade in/out effect for the control, and the number of pixels the user’s scrollbar should be from the top of the page before revealing the control. Inside the .js file, here is the relevant section to modify:
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="/articles_and_tutorials/how_to_integrate_jquerry_scroll_to_top_control_in_wordpress/up.png" style="width:48px; height:48px" />', //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
Change your img src, that appropriate with your site like this:
<img src="http://www.yoursite.com/wp-contents/themes/yourtheme/images/up.png" style="width:48px; height:48px" />
then “Save it!”
Step 3. Install to Your Site
Open your header.php file then
Add the below script to the <head> ….. </head> section.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scrolltopcontrol.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>
Change this line, that appropriate with your site You can put the script in the theme folder or …
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scrolltopcontrol.js">
You can make a folder for the script, example = “js” folder and change the link source like this
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scrolltopcontrol.js">
Refresh your site..it’s done, off course you can change the image with what ever you like and renamed with “up.png”.
How about you? Does your site uses backtotop button? Whether this function is important for your site? Please share with us in comment section below…Thanks.
Further resource :
-
Using jQuery Plugins to Scroll to Top
For other script and plugin to try. -
90 Creative Back to Top Links And Best Practices
For huge inspiration of site that uses back to top button.
Update : We just made a WordPress plugin for this script “Scroll to Top Plugin“.
Ensure your success in exam by using best quality testking 1Y0-A17 notes, testking PMI-001 exam dumps and testking 70-646 test engine
About The Author
36 Comments to “How To Integrate jQuery Scroll To Top Control in WordPress”
Add Comments (+)-
I am not new to blogging and really value your blog. There is much prime subject that peaks my interest. I am going to bookmark your internet site and keep checking you out.
-
That is nice to definitely find a site where the blogger knows what they are talking about.
-
I’d recommend to use wp template tag ‘bloginfo’ for the script insertion:
<script type="text/javascript" src="/scrolltopcontrol.js”>
So anybody just has to drop the js file in the theme folder.
Btw the link to the js file doesnt work for me.
-
Hi…that’s more efficient way, we just fixed the code use tag ‘bloginfo’. For the link to the js file, your right and the link can be accessed again now..
Thanks for the information, we felt very helpful.
-
U’rt welcome
Just saw that the php code had been ripped off my comment. Would work by integrationg a tag ? -
juju says: The problem is when you want to distribute your theme with this file: scrolltopcontrol.js
You have to change manually the img src…So..How to implement a relative path in a .js ??I’m looking for the same php function in jquery: bloginfo(‘template_url’);
Do you know where I can find it ??
Except that it’s perfect :o)
-
-
-
I usually don’t usually post on many Blogs,but I love your blog, I often read here, still I just has to say thank you… keep up the amazing work.
-
You really make good articles I would say. This is the first time I visited your site and so far I am impressed with the research you made to make this article awesome. Good Job!
-
idelectrik says: Hi,
Thanks for sharing !
I try this, but when i’m on top, image is fadeout, but i can see the hyperlink and “Scroll Back To Top”.
Any idea ?Thanks for your help.
-
Em…You want the images scroll-to-top always appear?
You can edit on file scrolltopcontroll.js and see this linesetting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},And change startline:100 with startline:0 like this
setting: {startline:0, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},I hope this can help you.
Regards.
-
Idelectrik says:
Hi,
thanks for help me!
It’s not exactly my problem.
When i scroll to top, the image disappear, and it’s perfect.
But, when the image disappear (top of the page), the link still exist, so when you put your mouse on, you dont see the image, but you see a link with the legend “scroll to top (you can try on your blog…)regards
-
We apologize we can’t help…because the script “scrolltopcontroll.js” wasn’t made by us. The tutorial is based this pages by Dynamic Drive.
Regards,
-
-
-
This is a truly extensive blog your have here but I had some questions about advertising on your website. So if you could reply to this post with a contact email, that would be big.
-
orygamy says: hi, very compliment for this tutorial but with my template i have a problem when use firefox browser:
the scroll top butto it’s uncliccable and under the template.here is a screen shot http://www.nicoladidio.it/scroll.jpg please can you help me?
thank.-
in scrolltopcontrol.js, edit this code
<img src=”http://www.yoursite.com/wp-contents/themes/yourtheme/images/up.png” style=”width:48px; height:48px” />
to
<img src=”http://www.yoursite.com/wp-contents/themes/yourtheme/images/up.png” style=”width:48px; height:48px; z-index: 1001;” />
see that I add z-index: 1001;
-
orygamy says:
THANK SO MUCH TO HAVE HELP ME
in scrolltopcontrol.js, i have edit this code
to
But it don’t function, so i have add position:relative before z-index: 1001
and it function very welllllllllllll:marry christmas
-
-
-
Hi there, thanks for the great tutorial.
Wonder if you can tell me how to change the alt tex on the button to say “retour en haut de page”as my site is french.
Thanking you in advance. -
I found the solution.
It was a firefox issue as firefox doesn’t recognize alt but the title of the image so i then added a title to the js and it now works.
Thanks again, great tutorial and easy to followMichelle
-
Thanks for the article.. been looking to integrate jquery like this with wordpress for a while, dont know wordpress that much. thx!
Dave Goodman
-
dreamrider says: In this way button works on WP v.3.3, too!
-
Wow, very nice effect! Wouldn’t even think there can be something like that…
Will think about implementing the button. Cheers
-
esty says: Thanks very much for your help!
Explanation and your writing is amazing!!Continue and succeed!
-
Yes,your point is great,if you are interesting in packaging,plaese scan the next.
Life is like to buy a packaging, buy a good packaging like to find a good object, we mutually consistent. Buy a bad package, simply do not fit your product, but not worth the candle, if forced to use an incompatibility with their own objects, even if married, it will not last long. Cherish life, to find a good object, buy a good packages.We are special in packaging and Package Manufacturer and please send email to: info@zetarpackaging.com, our website is http://www.zetarpackaging.com
Trackbacks/Pingbacks
- CSS Brigit | How To Integrate jQuerry Scroll To Top Control in Wordpress
- You are now listed on FAQPAL
- Scroll To Top Plugin | DynamicWP
- wp-popular.com » Blog Archive » How To Integrate jQuery Scroll To Top Control in Wordpress | DynamicWP
- 50+ Great Fresh Articles for Designers and Developers | tripwire magazine
- WordPress Picks for the Week [03/17] | Techtites
- Create Exclusive *Fully Customized* Blog Themes In A Snap! | 7Wins.eu
- 40 Magical Javascript & jQuery Tutorials | RockstarGadgets
- Scroll to Top « R7 Blog
Thank you for this great article, I really enjoy your blog layout.