google.com, pub-6771220306917688, DIRECT, f08c47fec0942fa0
Latest Articles
Loading...

Info Post
Previously I had written a post on "How to create a Simple Back to Top Button" for designing your own buttons using few basic softwares such as MS Powerpoint and MS Paint. As the name says, it was a simple button and now regarding a request from "Rafaqat Ali", here is another blog post for a Scroll Back To Top Button instead of moving to top quickly. For this, you need to add a simple jquery in the <head>.../<head> section of your blog layout and call the function in our code - all in just two steps as given below.

STEP 1: JQuery to be added in the <head> section of Edit HTML of Blog Layout

$(document).ready(function(){
 //Check to see if the window is top if not then display button
 $(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
   $('.scrollToTop').fadeIn();
  } else {
   $('.scrollToTop').fadeOut();
  }
 });
 //Click event to scroll to top
 $('.scrollToTop').click(function(){
  $('html, body').animate({scrollTop : 0},800);
  return false;
 });
});

Use the above codes in between <script> ...</script>

STEP 2: Call the JQuery function by adding class="scrollToTop" inside our code

<a href="#" class="scrollToTop" style="bottom: 10px; display: scroll; left: 5px; position: fixed;" title="Back to Top">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyILfA0YcFnS3WRUJQfHdL2Azx8ATLkP78QUR6R0EcAsQwk1l6J_lbwefjLPkGHqfwy6gvJYDngYlNvBOSm_FS4nXLOkavMdmBPIH86usnJaTHRdpflmTtc6RIvoh7BvIaLbupgZN0XmNx/s1600/back+to+top+button.png" />
</a>

Just add the above codes (under step 2) in Blog Layout -> Add a Gadget -> HTML/JavaScript and save your arrangement. Now, go to your webpage bottom and click the "Back to Top" button to see how good it scroll backs to the top.

Note: Notice that the only change we had made to our previously written back to top button code was the addition of just class="scrollToTop" in the a href above.

How to Create An Animated Scroll To Top Button

In case of creating an animated scroll back to top button, just use a .gif image instead of a .png image in the code above,

Example: Try this gif image (credits: funnybunnywebsites)
animated back to top buttonwhose image code is inserted as below,

<a href="#" class="scrollToTop" style="bottom: 10px; display: scroll; left: 5px; position: fixed;" title="Back to Top">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlB5kw_AQUi-kvAmD8diCwvthYgZcixDUBpL4FtO-hNbRbBs7T9Bfjp7my0zmhApApHyl9Hjs8L87zvYp_rsPXTU3CaGnO8BKDZR7Thyphenhyphensggp4fHicXqgDI4LzxpsLo44usFHPx00jpisHA/s1600/animated-up_arrow-red-yellow.gif" />
</a>

Hope you have benefited from this post! Let me know your thoughts in the comment below.

7 comments:

  1. blog without jquery library .. they need to add jquery library too .. ! nice information :)

    ReplyDelete
    Replies
    1. Ankur, thanks for dropping by....btw you don't need to add more than what is given above. And the codes above works perfectly having tried and using them personally :)

      Delete
  2. Nice post..helpful for those on Blogger platform... please write something for us too..I mean for Wordpress bloggers... :-)

    ReplyDelete
    Replies
    1. I would love to ...but right now my target is blogspot platform and yes, if I ever do write one on wordpress, I will sure let you know :)

      Delete
  3. Very useful post Uma! Thank you very much!

    As Ms. Maniparna asked (I guess, wordpress don't allow us to edit template as such.) I would also like to know if we can edit wordpress blog too!

    Regards,
    Sindhu
    Tantu
    The Arts & Me

    ReplyDelete
    Replies
    1. I think you can edit Wordpress blog as well although you should be sure not to mess up the codes. Do check this link "http://codex.wordpress.org/Editing_Files" for support :)

      Delete
    2. Thank you very much Uma... I always wanted to edit my templates... Thanks a lot!

      Delete

Thank You for visiting Momscribe.com !
Your contribution is greatly appreciated.
Please feel free to subscribe to this blog either by Email or any methods listed on the right side of this content.

நன்றி ! மீண்டும் வருகை தாருங்கள் :)