Treehouse: Grow your CSS skills. Land your dream job.

Scroll to Top link – help PLEASE!

  • # January 3, 2011 at 10:33 am

    Hey you all!

    I am in the process of designing a wordpress template for my own website. I found this nice plugin that gives you a scroll to top link in the corner of your browser. Here is a link to plugin so you can check it out yourself:

    Scroll To Top Plugin

    Now i have managed to replace the default image with my own but i don’t know any javascript so i am struggling to move it around. The only thing i can find is:

    controlattrs: {offsetx:5, offsety:100}

    The only problem with that is it moves the image around relative to the bottom right corner of the browser window. I need it to do this (See image as reference –> Here)

    It needs to be in a fixed position -450px from the center and 100px from the bottom.

    Here is the plugin .php file code if you don’t feel like downloading the plugin. If you do end up changing the code please show me what you did and what it does. Thank you for your help! It’s much appreciated!

    PArt of the Plugin code I found it in:

    # January 3, 2011 at 11:58 am

    Have you simply tried changing this:

    controlattrs: {offsetx:5, offsety:100}

    to this:

    controlattrs: {offsetx:450, offsety:100}
    # January 3, 2011 at 1:43 pm

    the problem with that is, its 450px from the edge of the browser window not the center. so when the browser window size changes, or someone else’s screen resolution is different to mine it will overlap or pull away from the content.

    check the picture link in my 1st post for a better description.
    thanks for responding though :)

    # January 3, 2011 at 1:55 pm

    Since its Javascript I guess you could make it a variable, something like:

    var OffsetXVariable="-450pxfromcentersomehowmeasured";

    You should probably be able to somehow assign the 450px from the center location as the value to that variable.
    And then use

    controlattrs: {offsetx:OffsetXVariable, offsety:100}

    I don’t know if it works though, I don’t really know javascript.

    # January 3, 2011 at 3:11 pm

    The code you posted has a line which indicates that the control element is wrapped in a div with an id of “topcontrol”. Instead of playing with javascript, you may be able to target the element with CSS and position it that way. You’ll need to change the controlattrs to 0 beforehand.

    # January 3, 2011 at 3:57 pm

    I did manage to do figure it out like this. What I did do was place a var in the javascript section:

    var myWidth = (document.documentElement.clientWidth / 2) - 458;

    and then at the controlattrs i did this:

    controlattrs: {offsetx:myWidth, offsety:200}

    works perfect, but doesn’t work if you adjust the window size after it has loaded. does however work again if you refresh the page :)

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

You must be logged in to reply to this topic.