Smooth scroll div alignment on single page site.

[jtrinker]

I’m building out a site that is essentailly one page, broken up into sections, and navigable through jquery smooth scrolling.

http://chiaroscuro.telegraphbranding.com/

Each section’s div is dynamically generated based on the size of the browser. My issue is that I’m having problems calculating the position of the sections in order to align them to the top of the page when a link is clicked. I’ve been trying to use jQuery offset() and position() but I haven’t had any luck getting all three sections to work. The first, funding areas, works great, but I cant get the other two, about us and projects, to align at the top of the browser like funding does.

Here’s my the jquery that matters:
`
$(document).ready(function () {
var slowScrollFunding = $(‘#funding-areas’).offset().top;
var slowScrollAbout = $(‘#about-us’).offset().top;
var slowScrollProjects = $(‘#our-projects’).offset().top;
panelOpen = true;
`
$(‘#anchor-aboutus’).click(function(event) {
event.preventDefault();
if(panelOpen == true) {
$(‘#slide-panel-content’).stop(true, true).animate({height: ‘0px’}, 600, function() {
$(‘html, body, #aboutus-wrap’).animate({scrollTop:slowScrollAbout}, 1000);
panelOpen = false;
});
`
Thanks so much.

[AndrewPham]

Hey James! Your problem is very complicated and it would be a perfect opportunity to ask Mr. Oakman to help you.

[Taufik Nurrohman]

is your code cutted, or indeed the way they are?

$(document).ready(function() {

var slowScrollFunding = $('#funding-areas').offset().top;

var slowScrollAbout = $('#about-us').offset().top;

var slowScrollProjects = $('#our-projects').offset().top;

panelOpen = true;

$('#anchor-aboutus').click(function(event) {

event.preventDefault();

if (panelOpen == true) {

$('#slide-panel-content').stop(true, true).animate({

height: '0px'

}, 600, function() {

$('html, body').stop().animate({

scrollTop: slowScrollAbout

}, 1000);

panelOpen = false;

});

}

});

});

[JoniGiuro]

I think the problem might be that you’re getting the top() for funding-areas, about-us and our-projects on document ready and maybe those elements are not yet completely loaded and resized. I’d try to move the three variable declarations insite the click function

$(‘#anchor-aboutus’).click(function(event) {
var slowScrollFunding = $(‘#funding-areas’).offset().top;
var slowScrollAbout = $(‘#about-us’).offset().top;
var slowScrollProjects = $(‘#our-projects’).offset().top;

…

[Author]

Posts