12-Awesome Scroll to Top navigation for blog & website

Scroll top navigation help user to slide/scroll webpage to top.it also effect design of webpage as scroll top button looks attractive while jquery make it great to work.Scroll top navigation is created by using css3 & jquery (necessary),while for space in webpage require some <div> tag.

12-scroll top navigation~DEMOS
Here we will take one by one Scroll top demos to understand deeply,but before that let's have some common code that must be use.

HTML Code

Below code must be paste before " </body> "

<p id="t4w">
<br/>
<a href="#top"><span></span>Back to Top</a>
</p>

CSS Code

paste below css code in <head> part of html code b/w <style> </style>

To use your own arrow change background url with your arrow image link.

JS Code

paste below js code above " </head> "

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

<script>
                 $(document).ready(function(){
                             // hide #t4w first
                           $("#t4w").hide(); 
                      // fade in #t4w
                      $(function () {
                      $(window).scroll(function () {
                      if ($(this).scrollTop() >400) {
                      $('#t4w').fadeIn();
                      } else {
                      $('#t4w').fadeOut();
   }
                      });
                          // scroll body to 0px on click
                          $('#t4w a').click(function () {
                          $('body,html').animate({
                          scrollTop: 0
                          }, 100 );
                          return false;
                        }); 
                          });
           });
</script>

After completing all above steps,must watch these demos

1.3d up scroll

DEMO

Arrow image link: http://pks.site50.net/3d.png

2.Alarm up scroll

DEMO

Arrow image link: http://pks.site50.net/alarm.png

3.back to scroll

DEMO

Arrow image link: http://pks.site50.net/back.png

4.up black arrow

DEMO
Arrow image link: http://pks.site50.net/up.png

5.up box scroll

DEMO
Arrow image link: http://pks.site50.net/box-up-icon.png

6.up bubble icon

DEMO
Arrow image link: http://pks.site50.net/upbub.png

7.up double icon scroll

DEMO
Arrow image link: http://pks.site50.net/updouble.png

8.up eject icon

DEMO
Arrow image link: http://pks.site50.net/upeject.png

9.up scroll

DEMO
Arrow image link: http://pks.site50.net/upscroll.png

10.up simple icon

DEMO
Arrow image link: http://pks.site50.net/upsimple.png

11.up triangle scroll

DEMO
Arrow image link: http://pks.site50.net/uptriangle.png

12.up shadow scroll

DEMO
Arrow image link: http://pks.site50.net/uphadow.png

The overall code is created by t4w team for our dear user.so use these scroll navigation & if have any query than inform me.

12-Awesome Scroll to Top navigation for blog & website

3 comments:

Translate