Javascript to control the length of page down/up scrolling?

[Martin717]

Hello,

I've created a site (not live yet) that has a fixed header and footer, along with a bit of associated padding. This creates a problem - when hitting page down, the scroll length isn't compensating for the heights of these elements. Therefore, when "page down" is pushed, you end missing some content and have to manually go back up a bit (with the arrows, etc.).

I'm a novice to web design/coding. I've built this site for a non-related business that I'm near ready to launch, with this issue one of the few things left to fix. I've tried two different Javascript "fixes" for this:

one I found online and can't get to work at all

another that someone nicely wrote for me, but doesn't work correctly. After adjusting the parameters, it'll "page down" nicely ONCE. Then every time you hit the button again and release the key, it'll jump right back to the position on the page that one hit of "page down" would bring you to. Due to this, I can't check if and what it does for "page up".

Does anyone have an idea of what needs to be used/written/etc. to adjust things so that every time someone uses a "page" key, it'll function as expected *with* an adjustment for the fixed portions of my pages?

If coding of one of my pages - and possibly the Javascript I've tried - will help with possibly working on a solution, please advise and I'll add it here.

I greatly appreciate your help! :)

[jscheuer1]

Yes, we would need to see all that. Better still would be a live demo. I'm sure you could put something up somewhere using stock images and text, or use your own images and text. We just have to see it - the layout and the script.

[Martin717]

Hello John,

Thanks for the fast response.

I had someone host a "dummy" page of sorts for me, with generic content. For whatever reason, the fake pictures aren't displaying (I'm guessing he didn't change the links), so I'm hoping this will help. Here's the link:

http://www.11fifty.com/Site_108/before.html

There isn't any Javascript to control the scrolling in that page. I've pasted the coding (or links to) for the various attempts at "fixing" this problem below.

If you need more than is given so far, please let me know! :)


First attempt - this had no effect:
http://jsfiddle.net/MMM717/w96Hu/

(the above was modified from the original in the next link, to replace the "bar" code, since I already had a fixed header):

http://jsfiddle.net/bpMCE/


Second attempt - this caused the page to keep jumping back up upon successive "page" button releases:

var MyHeight = window.innerHeight - 232;

window.addEventListener('keyup', function (e) {
if (e.keyCode === 34) {
window.scrollTo(0,MyHeight);
}
}, false);


...and a variation on that, with basically the same results


var MyHeight = window.innerHeight - 0;

window.addEventListener('keyup', function (e) {
if (e.keyCode === 34) {
window.scrollTo(0,450);
}
}, false);


Last attempt - a simple piece of code I found, that may not have been appropriate - it didn't help...:


$(document).scrollTop($(document).scrollTop()+$(window).height());

[jscheuer1]

All I needed was the demo with no script (11fifty.com/Site_108/before.html). I added this in the head after the style section:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
(function($){
function processkey(e, way){
var availH = $(window).height() - $('.header').outerHeight(true) - $('.footer').outerHeight(true);
$(document).scrollTop($(document).scrollTop() + availH * way);
e.preventDefault();
}
$(document).keydown(function(e){
switch(e.keyCode){
case 33: { //pgup
return processkey(e, -1);
}
case 34: { //pgdown
return processkey(e, 1);
}
}
return true;
});
})(jQuery);
</script>



And everything worked out just fine.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Any problems or questions, just let me know.

[Martin717]

I'll try it in my pages and let you know how I do, John. Thanks! :)

[Martin717]

Hello John,

You're a genius! :) I don't say that lightly. I can't believe this finally works! It even works better than a regular page up/down scroll on a page that doesn't have any fixed elements, as there is no overlap. The only quirk I can find on one of my pages is when Internet Explorer into IE7 mode, only one (of eight) is giving me a scroll bar at the right. I don't think that has anything to do with your fix though.

I'd like to at least make a small donation. Which do you prefer from the ones noted in your signature?

Thanks so much!

[jscheuer1]

I'd like to at least make a small donation. Which do you prefer from the ones noted in your signature?

Thanks so much!

You're welcome! As for where to donate, that's your choice.

[Martin717]

OK - I should be able to send something tomorrow. Thanks again, John!