ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

Add jQuery powered scroll to Top button in wordpress

CW
Add jQuery powered scroll to Top button in wordpress

WordPress gives us unlimited abilities to customize our blogs according to our needs and preferences and one of the things that make this possible is the miraculous jQuery. And today we are gonna give a quick tutorial on how to add a jQuery powered Goto TOP button on your WordPress blog.

jquery logo1

jQuery powered scroll to Top button

Automated scroll button

If you don’t want to get into much of a hassle you can download the Scroll to Top Plugin by dynamicwp team.

Add Top Scroll button Manually

To simplify this job we would be using jQuery Scroll to Top Control by Dynamic Drive. As the name suggests, it allows you to display the button as the user scrolls down at the bottom right corner of your blog.

Integrate jQuery in WordPress

Here is what you need to do in order to integrate jQuery into your wordpress blog.

  • Upload the file to your theme’s folder
  • eg.“http://www.yoursite.com/wp-content/themes/them-name/scrolltotop.js“

  • Download this icon : Top icon
  • Upload the icon to your images folder
  • eg: “http://www.yoursite.com/wp-content/themes/them-name/images/gototop.png”

Caution : Before uploading your javascript file scrolltotop.js open it in a text editor like notepad and change the url of the image.

Scripting time

Now add the following code snippet into your header.php file. You can access it from your dashboard, Appearance>>Editor>>header.php

Caution : Before adding the code just make sure that the url of the javascript file is correct in the first line of the code

Well that was much of it, now if you would like to customize the button to suit your style then here is a piece of code that you can add/edit in your .js file:

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML:, //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

I hope you liked the tutorial, do share your comments and feedback with us.

If you find this post useful just consider sharing it with other via Facebook, twitter or Digg. To get such updates regularly please subscribe to our feed via Email .

<Credit>

  • Author Bio

  • Latest Post

Article by Karan Labra

Karan has written 6 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 8 comments… add one }

  • Rahul @ MazaKaro

    Very good tutorial , customizing blogs is a very important point and i enjoyed learning and reading about jquery , thank You

    Reply
    • Blogging tips

      Thank you for your feedback Rahul.

      Reply
  • ashish

    Newbie and fresh bloggers like me would like to choose the plugin

    Reply
  • Nihar

    Thank you very much for this nice tutorial.

    Will try to put it on my blog.

    Reply
    • Karan labra

      Try it and do share if you face any problems.

      Reply
  • mosrrof

    I like jQuery for powerful features. I will try it sure in my Blog. Thanks to author for this advanded and useful post.

    Reply
  • Kavin Gray

    Nice article. Better fx than the default “Go to Top” button.

    BTW, what is your thought on minifying javascript code?

    Reply
    • Karan labra

      I did gave it a try and it significantly decreased my loading time.
      But it appeared that compressing javascript created havoc on my blog.
      And it hardly matters as long as you are providing quality content to your readers, as that is what matters the most.

      Reply

Leave a Comment