Grow your CSS skills. Land your dream job.

Scrolling Go-To-Top Button

  • # May 3, 2008 at 6:14 pm

    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?

    Code:
    #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

    # May 3, 2008 at 7:23 pm

    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

    box
    # May 3, 2008 at 7:25 pm

    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.

    # May 3, 2008 at 7:59 pm

    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

    # May 3, 2008 at 9:15 pm

    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.

    Code:

    Does this look good? and does it go in the header.php in wordpress?

    Chris :D

    # May 7, 2008 at 8:41 pm

    ok so i figured it out i used

    Code:
    .gototop{
    position:fixed;
    right:0px;
    bottom:10px;
    color:#999;
    font-size:10px;
    text-decoration:none;
    _display:none;
    }

    for my CSS and i used

    Code:

    for my HTML and i put my javascript in the beginning of my body. IT WORKS !!!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".