SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Back To Top button using Javascript

    Hi folks,

    I'm completely new to Javascript coding.

    I would like to have a Back To Top button in the bottom right corner of the viewport. I figured that Javascript would be used for this, and after some searching, I found this Jump To Top Link script at DynamicDrive. I'm sure I could easily change its appearance from a link to a button but I don't like the jerky scrolling effect. I wondered if you guys could explain to me how to make the button (or link in the script's case) stay in the bottom right corner of the viewport at all times instead of scrolling?

    Better still, is there a way of doing this with CSS?

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this:

    Code html4strict:
    <a href="#top" id="toplink">Go to the top</a>

    Code CSS:
    #toplink {
        position: fixed;
        bottom: 10px;
        right: 10px;
        line-height: 30px;
        height: 30px;
        color: white;
        background: black;
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or just <a href="#" id="toplink">Go to the top</a>.

  4. #4
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you fredda but I was looking for something like what JimmyP posted. I already know about the

    HTML Code:
    <a href="#" id="toplink">Go to the top</a>
    technique but I wanted it to stay at the bottom right corner of the viewport.

    Cheers JimmyP, I'll play around with that and see what I get.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •