How to implement the functionality of autoscrolling page if the element is below page fold in javascript?

Question

Hi,

I want to implement a similar functionality like Template Monster's menu. I am trying to create a feature list which slides down when the user clicks on the feature. But if the link is at the bottom of the page and the user clicks on that link, the feature list is shown below the view area and the user doesn't know that it is open until he manually scrolls the browser window down.

I want to incorporate a functionality that if the feature list is not in the viewable area, the browser window automatically scrolls down to show the full list (templatemonster.com has done so with their drop down menus).

Can anybody help me?

Thanks,

Gaurav

Answer 1

The website which you reference is using the Prototype JavaScript framework with Scriptaculous for it's visual effects. These libraries make this sort of task much easier as there are built in controls to achieve, more or less, exactly what you want.

If you want something to slide down when a user clicks on it; you should be thinking about the event click and effect slide down Check out the demo in the manual for this.

The second aspect of scrolling can be achieved using these libraries too. Again, checkout the demo in the manual for this too. Essentially, you need to use an anchor tag to mark the point on the page where the feature exists, and then use the scrollto effect to take you to that poision on the page.

Hope this sets you on the right path.