Smooth Scrolling using jQuery 1.2

What do you mean to say? on clicking more info or add to cart what should happen?

Hi,

Not really. I mean when any of the menu items are clicked on the lower menu bar. This bar has a slider on the right hand side and is exactly the same as the menu above the product listings.

Thanks

Sorry, i dont understand what you really require.

Quite simply my friend, when a user click a function inthe lower menu bar found at the URL detailed above, while the product list is loading, the user is then smoothly scrolled back to top of the product list.

Is there something else I can help you with in order to make it more clear?

Kind regards, Damien

You mean to say the below case:
1. user clicks on a product
2. user scroll up/down before the product is loaded
3. you want to scroll to the product listing after it is loaded (automatically)

Am I correct?

Point#3 has to be done?

Regards.

Hi senthurpandian,

Thank you for your persistence with this issue.

The product listings are just fine at the moment and the functionality works well.

An issue develops when a button on the lower menu bar is pressed. If you do this, you'll notice the products disappear as they reload. This is rather confusing for the user so what I would like to happen is this:

1. User clicks a button on the lower menu bar
2. The page smoothly scrolls to the top menu bar
3. The products reload after the page has scrolled.

Thanks again senthurpandian!

menuBar.png

Oh, sorry dude... I took a long time to start...... :)

Use this:

$('html,body').animate({scrollTop: $("#pl_menu").offset().top},'slow');

Select allOpen in new window

Cool, thanks!

It's not working at the moment though. Apart from the jquery.js (v1.2.6) does this function require any other file dependencies?

Thank you

No, it should work.

$('html,body').animate({scrollTop: $("#pl_menu").offset().top},'slow');

I have fired the same in your page, it worked.

When are you calling this?

Thats a good question, when/how should I call it?

Onclick of that button. (your-lower menu)

Ah,

This seems to sort of work... I have this code:

function scrollWindow() {
  $('.sclme').click(function() {
    $('html,body').animate({scrollTop: $("#content_center").offset().top},'slow');
  });
};

in the pl.view.js file (line 71), I have called it in the pl.core.js file (line 75) when ever the product data reloads. This seems to be working however, I have noticed that if a user clicks to smooth scroll more than 2/3 times, the browser gets caught momentarily as if the scrollWindow() function is not clearing or is repeating it's self after the initial scroll?

Do you have any ideas why? Also, is the location of the scrollWindow() function in the optimum place in both attached files?

Thank you again!!


pl.core.js
pl.view.js

Oh, well.. Sorry i am not able to click it 2/3 times (it scrolls, before i click). Anyways, i can suggest you to keep a variable to set check it.

variable_xyz = true;
Onclick_Of_Bottom_Menu
{
if (variable_xyz==true)
{
set a variable = false;
//do whatever
set the same variable = true;
}
}

does this helps?

Oh sorry, I mean after the lower menu has been clicked 2/3 times in a row. If you try to scroll wither using the wheel of your mouse or moving the browsers scroll bar down the page doesn't actually move it gets stuck.

I don't really understand the check setup you suggest, can you please explain in more detail?

Thanks

Really sorry dude..... Am not able to simulate this!

I have Firefox 3.5.9; IE 6.0.2. Both worked with the below operations:

1. go to the bottom menu. click large-5 times.
2. go to the bottom menu. click large then med then small then large
3. randomly click on them, more number of times.

Sorry dude!!

BYT, which browser you are using?

- Firefox 3.5.9

Hmmm... did you not notice the page getting stuck (almost like a stutter) as you were scrolling back down?

Try changing the data set by:

1. choosing a category from the left column
2. clearing the choice by clicking the 'x' (this will show all the items in the store)
3. going to the bottom menu and clicking the right arrow on the slider 5 times +

... did you notice it then???

Yes, I am now able to get you! (Starting-trouble :) lol)

Please wait, I am looking into it.

I can't seem to get that to work, is this the complete syntax:

scrollWindow().stop(true, true);

Sorted!...

$('html,body').animate.stop(true, true);

Thank you!

Glad to know that it worked!

Warm wishes!!