[pob]

Originally Posted by bazzle

yes, that's the bugger.

Thanks for that. I'm gonna rip that site apart now and work out how they did it.

looks gash if you ask me and surly it just a fixed div?

[bazzle]

The whole website looks gash if you ask me, and I'm trying to work out the how the button links you to the next item rather than how the buttons themselves are positioned.

[gabrield]

I don't know too much about Javascript, but can't you just have a variable that memorize in which section you are (0,1,2,3,...) and when you click up, Javascript scroll to the previous section, and then change the variable.

For example (this isn't real code, just an idea)

var section = 1;

nextbutton.onclick () {
scrollto(section+1);
section++;
}
previousbutton.onclick() {
scrollto(section-1);
section--;
}

If you could "translate" that to Javascript, in combination with what was posted previously, I guess you have what you're looking for.

[bazzle]

Thanks, that looks like it might work, wouldn't know how to make it work though.

If I could code javascript then I would be sorted but unfortunately I rely on copying snippets from the other websites.

[bslate]

I know how much of a pain this can be :P Making the fixed nav scroll to an anchor link is simple. 100's of options for that. Getting to move 1 section at a time based on the current section is definitely more difficult.

Here is another example:

Crush + Lovely

They use both methods that people are talking about. Anchor scrolling (with the side nav) - but also next section scrolling if you use the keyboard. Take a look at their code, may be helpful.

I would also take a look at serial scroll again. I've used it before to scroll based on a pixel value. (-+ XX which I know you would want to avoid) But I believe its possible to scroll to the next element with a specific class name.

[gabrield]

Originally Posted by bazzle

Thanks, that looks like it might work, wouldn't know how to make it work though.

If I could code javascript then I would be sorted but unfortunately I rely on copying snippets from the other websites.

But I just thought that if the person scrolls with scroll bars, you'd need to know in which section he now is, so you'd need to have some code to find where the user currently is.

[bazzle]

This is what I've got.

$(function() {

var s = $('.page');
var s = 1;

$('#up').click (function{
scrollto(s+1);
section++;
});

});

I'm close to giving in, don't really know what I'm doing.

[bjzaba]

Let me google that for you

hiddenloop's paging_keys_js at master - GitHub

Says it uses jQuery - dunno if you can add scrolling though.

[delatorre]

Did you get this sorted Bazzle? I added a smooth scroll to a page this morning using MooTools and it should only take a couple of minutes to adapt it to what you need. Linky - click the 'apply for this job' link. Let me know if it's the right kind of effect.

[bazzle]

Originally Posted by bjzaba

hiddenloop's paging_keys_js at master - GitHub

Says it uses jQuery - dunno if you can add scrolling though.

Cheers mate, that's exactly what I want. Not really that bothered about smooth scrolling, although it would be nice.

[bazzle]

Originally Posted by delatorre

Did you get this sorted Bazzle? I added a smooth scroll to a page this morning using MooTools and it should only take a couple of minutes to adapt it to what you need. Linky - click the 'apply for this job' link. Let me know if it's the right kind of effect.

Can't see such a link mate.

[delatorre]

This should do what you want but it's not been tested. If you want to try it, you'll need MooTools Core and also a download of MooTools More with Fx.Scroll included. You could use Core only and switch Fx.Scroll to scrollTo.

You'll need to add #up and #down ids to the 2 arrow buttons.

window.addEvent('domready',function(){
	
	var pages = new Array();
	var pages_total;
	$$('.page').each(function(p, i) {
		pages[i] = p.getPosition().y;
		pages_total = i;
	});
	var current = 0;
	
	$('up').addEvent('click', function(){
		if (current > 0) {
			current = current-1;
			new Fx.Scroll(window, {
			    offset: {
			        'y': pages[current]
			    }
			}).toTop();
		}
	});
	
	$('down').addEvent('click', function(){
		new Event(e).stop();
		if (current < pages_total) {
			current = current+1;
			new Fx.Scroll(window, {
			    offset: {
			        'y': pages[current]
			    }
			}).toTop();
		}
	});
	
});

[bazzle]

Thanks, I'll try it out.

[MiguelKnives]

its possible I have seen several web sites like this...