Scrolling to just below the header

[peregrinepress]

I apologize if this is not the right forum (couldn't decide if this is a js problem, or just css), and if it seems kind of basic. I have a site that seems quite simple but there is a page with a very long list on it. I wanted to be able to scroll the list up underneath the header information, which I've done using position:fixed for the header. Then I thought it would be better for the user to be able to jump through the list to different categories. I can't figure out how to get the scrolling to simply stop at the bottom of the header information. I've tried to implement scrollTo(), scrollTop(), but my js skills are limited at best. Any help would be most welcome. (Of course I'd also like to have this scroll nice and smoothly when going from one part of the list to another).

Right now it is coded with hash-tag links. And there is one instance where I manually placed the <a>tag where I wanted the scroll to stop. This is a bad work-around for if/when this list changes, obviously, I just wanted to see if I could make it work somehow or other.

I've posted a working version of the page here:
jmbroekman.com/arieser/publications.html

Thanks very much.

[AussieJohn]

I see what your problem is here, what you'd ideally have is an offset that these elements have so they do not sit underneath the header.

If you're happy to use jQuery and a plugin or two, this is a very easy problem to solve.

There is a jQuery plugin I've used a few times called LocalScroll, it's an offshoot of the ScrollTo plugin which it requires to work. If you were to use these plugins it becomes a simple matter of calling a few lines of JavaScript and you'll have smooth scrolling *and* the ability to offset the header height to the scroll amount.

//include the scripts (jQuery, ScrollTo and LocalScroll) before you call this of course
 
$(document).ready(function(){
 
    $('#pub').localScroll({
        offset: { top: -200 } //offset by the height of your header (give or take a few px, see what works for you)
    });    
 
});

Now you should be able to click your "local" (anchor) links and they will scroll nicely to the correct location.

[peregrinepress]

I cannot say thank you enough. I have been wrestling with this for two days, and your solution is perfect. I thought there was a simple way to do this with jquery. I really appreciate the help, the speed with which you responded, and the thorough response.

Jessyca (registered as peregrinepress)

I see what your problem is here, what you'd ideally have is an offset that these elements have so they do not sit underneath the header.

If you're happy to use jQuery and a plugin or two, this is a very easy problem to solve.

There is a jQuery plugin I've used a few times called LocalScroll, it's an offshoot of the ScrollTo plugin which it requires to work. If you were to use these plugins it becomes a simple matter of calling a few lines of JavaScript and you'll have smooth scrolling *and* the ability to offset the header height to the scroll amount.

//include the scripts (jQuery, ScrollTo and LocalScroll) before you call this of course
 
$(document).ready(function(){
 
    $('#pub').localScroll({
        offset: { top: -200 } //offset by the height of your header (give or take a few px, see what works for you)
    });    
 
});

Now you should be able to click your "local" (anchor) links and they will scroll nicely to the correct location.

[peregrinepress]

Hi AussieJohn,

I have another small conundrum. I am using a fixed side div to keep the photo in place while the main content scrolls under the header. If the browser window is smaller, the content will scroll up and pull the footer up under the photo as well. Is there a way to keep the footer fixed below the content including the fixed side while the rest scrolls? So, it will need to scroll for a while, but then, I'd like it to stop when it reaches a point below the fixed side content. Does that make sense, is it even manageable? I tried moving the footer below the wrapper, but that still didn't solve the problem. I realize that if the window is small enough to require the content moving up to finish before the end of the photo, the footer might not in fact be visible if it stops below the footer.

The link is still: http://jmbroekman.com/arieser/publications.html

I see what your problem is here, what you'd ideally have is an offset that these elements have so they do not sit underneath the header.

If you're happy to use jQuery and a plugin or two, this is a very easy problem to solve.

There is a jQuery plugin I've used a few times called LocalScroll, it's an offshoot of the ScrollTo plugin which it requires to work. If you were to use these plugins it becomes a simple matter of calling a few lines of JavaScript and you'll have smooth scrolling *and* the ability to offset the header height to the scroll amount.

//include the scripts (jQuery, ScrollTo and LocalScroll) before you call this of course
 
$(document).ready(function(){
 
    $('#pub').localScroll({
        offset: { top: -200 } //offset by the height of your header (give or take a few px, see what works for you)
    });    
 
});

Now you should be able to click your "local" (anchor) links and they will scroll nicely to the correct location.

[AussieJohn]

One solution would be to allow the footer to scroll over the top of the photo, which is relatively trivial:

/* These are just overrides/additions for your current styles */
footer { 
    margin:10px auto 0;
    position: relative;
    z-index: 1000;
    background: #fff;
    padding-bottom: 20px;
}
 
#wrapper {
    margin:10px auto 0;
}

This will push the footer to the very bottom of the page, and because of its higher z-index than other elements, it will sit over the top of them.