Smooth Scrolling using jQuery 1.2

Hello,

This is my site: http:www.agift4him.com and I would like to offer visitors a better experience whilst using it.

My idea is to smoothly scroll the window whilst new content is loading (AJAX), I would like this to happen if any of the buttons are pressed on the lower menu bar, just below the product listings.

I have attached some code that I am using but I'm probably missing something because I can't seem to get it to work??

Any help here would be great!

Thank you
$(function() {
  $('.sclme').click(function() {
    $('#asr').animate( 1000, 'easeOutBounce');
  });
});

Open in new window

LVL 4
wilson1000Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
What do you mean to say? on clicking more info or add to cart what should happen?
0
wilson1000Author Commented:
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
0
StealthyDevCommented:
Sorry, i dont understand what you really require.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

wilson1000Author Commented:
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
0
StealthyDevCommented:
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.
0
wilson1000Author Commented:
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
0
StealthyDevCommented:
Oh, sorry dude... I took a long time to start...... :)

Use this:



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

Open in new window

0
StealthyDevCommented:
If you want to show the New Gift Ideas/Specials/Featured tabs aswell, do this:
<ul id="MyTabs" class="az_tabs"> (given id=MyTabs)

then use this:

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

Best Regards.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
wilson1000Author Commented:
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
0
StealthyDevCommented:
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?

0
wilson1000Author Commented:
Thats a good question, when/how should I call it?
0
StealthyDevCommented:
Onclick of that button. (your-lower menu)


0
wilson1000Author Commented:
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
0
StealthyDevCommented:
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?
0
wilson1000Author Commented:
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
0
StealthyDevCommented:
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?
0
wilson1000Author Commented:
- 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???
0
StealthyDevCommented:
Yes, I am now able to get you! (Starting-trouble :) lol)

Please wait, I am looking into it.

0
StealthyDevCommented:
Hi again!

I can give my guess only:

Since we are calling the animation, it should be setTimeOut function only!
I think, we are changing the content and something wrong is happening.

Can you try stopping the animation at the end of the content load (AJAX).? (At the end of parseData)


http://api.jquery.com/stop/

Note: use clearQueue as well.. May be the problem. Also use jumpToEnd to jump to the top.

ie, .stop(true, true)

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

scrollWindow().stop(true, true);
0
wilson1000Author Commented:
Sorted!...

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

Thank you!
0
StealthyDevCommented:
Glad to know that it worked!

Warm wishes!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.