October 15th, 2010, 08:14 PM
How to scroll a div section on an html page?
I have a website faq page. With all the faqs displayed it looks "too much".
So I have all the faqs at the top of the page and all the faq answers in a div below them with a scroll bar.
What I want to do is when a user clicks a faq, the div will scroll down (or up) so the corresponding answer is displayed.
- a name link at the top of the page like <a name="top"></a>
- one on each of the answers like <a name="faq15"></a>
- a link on each faq like
So what happens when a faq is clicked is
- The answer is pulled to the top of the div (which is good)
- Then the div is pulled to the top of the page, (which is not so good as it hides all the faqs)
and then the page is repositioned with the top of the page at the top of the browser window (and we can see all the faqs again).
Which works ok except that the page jumps twice during this process which is a bit annoying.
Any suggestions for a way where I can just get the div to scroll without repositioning the page would be appreciated.
October 17th, 2010, 07:45 AM
You can try little old trick: have hidden textbox near every answer.
Instead of your current code, have code that is doing the following:
- show the proper textbox
- set focus to the proper textbox
- hide the textbox again
Hopefully, setting focus will achieve what you want in smoother way.
Let me know if you need help implementing the code, will try to pull
something together when I'll have some time.
October 18th, 2010, 08:24 PM
Awesome. That works well.
Few problems though.
1. I did have to add another textbox at the end of the faq answers to focus on first otherwise the faq answer wold be displayed with the title at the bottom of the display div(when the div scroll position was above the faq answer).
2. In the case that the user has their paged zoomed in to make everything bigger and the faq answer display div is not completely on the page then the paged gets moved (obscuring the faqs) so the display div is fully on the screen.
I tried using scroll() to take the page back to it's original position when the faq was clicked but then we get the page jumping again.
Am I able to lock the page to stop it moving when a faq is clicked?
The focus() method is pretty well supported in all the browsers isn't it?
October 19th, 2010, 04:11 AM
Yeah, focus() was there from the very beginning and will most probably
stay to the very end.
Regarding your problem, not sure I understand.. can you post link or
attach the full code so I can reproduce and see for myself?
October 21st, 2010, 12:59 AM
Ok Thanks shadow wizard.
I have sort of solved the problem by putting the faqs down the LHS and the anser display box on the RHS.
Still what happens is when Iput the focus on to one of thos textboxes in the display div, the whols page will move so that all of the display box is displayed on the screen.
Go to http://planetcarpool.co.nz/faqs.asp, zoom in the page so you can see the faqs and part of the faq answer display box.
Then when you click on one of the faqs, the whole page will scroll up or down in the browser window to try and fit the complete answer display box in the browser window.
October 21st, 2010, 02:53 AM
Sorry, can't see any way around what you describe.
In "ordinary" view does everything work fine though?
October 21st, 2010, 03:37 PM
What do you think? I am comfortable with it.
I just thought that there may be some way of temporarily locking the scroll position of the parent page while the display div was positioned.
Your original advice worked well. Thanks
October 24th, 2010, 03:28 AM
Nope, nothing that I know can lock the scrolling.
Originally Posted by BobBob
Maybe disabling the whole div element, but it will also make it
grayed out and I guess you prefer to avoid this?
Cheers anyway, glad I could help.