Monday, 29 July 2013

JQuery, make html pages scroll-able ( Blogger example )

During writing a post in blogger I had a thinking that on other pages of my blog like "Project, Portfolio etc" , how to show some particular section of my page to users as these are single static pages with no posts and have to update the whole page if we want to add some piece of update , so what if I want to share some latest section on that page , here is the idea , make our page scroll-able to that specif location base on element id or class name , like that link : "Restaurant Chain Management System is launched", click on that link and see how it works.
Now lets have those tiny bits of lines that makes this happening:

 $(function () {
       function scrolView(i) {
           $('div').each(function () {
               if (($(this).attr('id'))==i) {
                   $('html, body').animate({
                       scrollTop: $(this).offset().top
                   }, 1000);
               }
           });
       }
       scrolView('1');
   });


That is it , use above lines and make your pages scroll-able.