treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Scrolling Go-To-Top Button

  • ok so i have two questions...First: I went to http://bestwebgallery.com/ and i saw that they have a Go to top button but when you click on it it does this fancy scrolling instead of jumping you straight to the top. Now that website is wordpress so maybe they have a plugin or just some simple code but does anyone know how i would pull it off. Second: I went to http://www.dezinerfolio.com/ and they have a Go-To-Top button two but it is all the way in the corner and scrolls with you at all times. Now would this we the coding for it just readjusted?
    #mini-nav {style.css (line 90)
    position:fixed;
    right:10px;
    top:20px;
    width:18px;
    }
    If not could someone tell me how to set it up

    Thanks :D
  • Yep, the "Top" button on Deziner Folio could be done with just some fixed positioning CSS. To get the "smooth scroll" effect, that's javascript. Check out David's example of using MooTools to do this:

    http://davidwalsh.name/dw-content/moo1. ... scroll.php
  • It is once again position:fixed. As I've mentioned in your other thread, ignore and remove the style:line 90 reference.

    Why don't you play around with a simple web page and use position:fixed. That's the best way to understand.
  • ok cool thanks Chris and thanks box. Is there a way i can play with my wordpress theme without using my website as a tester? something that is not online. maybe a application or something?


    Thanks :D
  • where would this go? I am using http://www.dezinerfolio.com/2007/08/08/ ... th-scroll/ and i have played with the script in the .html file they have provided and i thought i understood it but i do not know where to put this in my wordpress. I am thinking you put it in the .css file and put the smoothscroll.js in the root directory of the theme.
    <script src=\"<?php bloginfo('stylesheet_directory'); ?>/smoothscroll.js\" type=\"text/javascript\" language=\"javascript\"></script>
    Does this look good? and does it go in the header.php in wordpress?

    Chris :D
  • ok so i figured it out i used

    .gototop{
    position:fixed;
    right:0px;
    bottom:10px;
    color:#999;
    font-size:10px;
    text-decoration:none;
    _display:none;
    }
    for my CSS and i used
    <a class=gototop name=\"footer\" href=\"#top\" href=\"http://www.filmgrenade.com/\"><img src=\"images/gototopright.gif\"/a>
    for my HTML and i put my javascript in the beginning of my body. IT WORKS !!!