Forums

JediN1nja

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:

<script type=\"text/javascript\">
			var scrolltotop={
			//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
			//scrollto: Keyword (Integer, or \"Scroll_to_Element_ID\"). How far to scroll document up when control is clicked on (0=top).
			setting: {startline:$newat, scrollto: 0, scrollduration:$newspeed, fadeduration:[500, 100]},
			controlHTML: '<img src=\"$newimage\" />', //HTML for control, which is auto wrapped in DIV w/ ID=\"topcontrol\"
			controlattrs: {offsetx:5, offsety:100}, //offset of control relative to right/ bottom of window corner
			anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as \"Scroll Up\" links

bigsilk

Have you simply tried changing this:

controlattrs: {offsetx:5, offsety:100}

to this:

controlattrs: {offsetx:450, offsety:100}

JediN1nja

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 :)

Bob

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.

aaronsilber

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.

JediN1nja

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 :)

treehouse : what would you like to learn today?

Forums

Scroll to Top link - help PLEASE!