Jump to content

Does Anyone Know How to Do This?


MinusMyThoughts

Recommended Posts

Can anyone tell me how this page works? I have a rough idea, but JavaScript isn't really a strong point of mine, if this even functions using JS.Stellio LLCI'd love a tutorial, if one exists. Otherwise, a general idea of where to start would be awesome. Thanks!-Jason

Link to comment
Share on other sites

It isn't as complicated as oyu might think. It is just some CSS.The part of the site that is fixed (logo and links) is placed last in the XHTML in <div id="fixed"></div>then this CSS holds it in place

#fixed {position:absolute;left:40px;top:55px;width:140px;height:200px; }body > div#fixed { position: fixed; }

Link to comment
Share on other sites

I guess I should have been more clear; the part I'm trying to figure out is the scrolling. Try scrolling anywhere on the page and then click a button.That was what I meant. Sorry for the lack of description.-Jason

Link to comment
Share on other sites

Hmm, that script looks pretty complicated. The idea, however, isn't all that complicated. If you want to click on a link and have the page scroll to the section rather than immediately jump to it, you'll want to follow steps similar to this:1) Get a reference to the element to which you want the page to scroll:

var element = document.getElementById("section3");

2) Get the position of that element relative to the page:

var top = element.offsetTop;

3) Create a function that adds (or subtracts) a set number of pixels to the document.scrollTop property:

var interval = 10;function scroll(direction){	document.scrollTop += interval * direction;}

4) Create a function that animates the whole thing that is activated when you click on the link/button:

function animate(){	if(top < document.scrollTop)	{		scroll(-1);		setTimeout("animate();", 100);	}	else if(top > document.scrollTop)	{		scroll(1);		setTimeout("animate();", 100);	}	else // top = scrollTop	{	}}

This will, of course, require some tweaking and fine tuning, but I hope it'll help you get started.

Link to comment
Share on other sites

I've built something similar to this, I think, in Flash. Does JS support horizontal movement as well?Because that would be super...-Jason

Link to comment
Share on other sites

Yeah, you can get the scroll position of the horizontal scroll bar by using the scrollLeft property rather than scrollTop. If you were to set the scrollLeft position in a setTimeout loop, you'd have horizontal scrolling.

Link to comment
Share on other sites

Sweet!I don't know if I'll actually use that, because I've always hated side-scrolls, but it's nice to know. I guess I'll play with it and decide if it looks cool enough.Thanks!-Jason

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...