PDA

View Full Version : Scrollable content script III Quick back to top of scroll



printman55
01-13-2009, 04:42 AM
1) Script Title: Scrollable content script III Very freely adapted from Scrollable content script II by jscheuer1
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm
3) Describe problem: I have constructed a lengthy scroll and want to place "back to top" points within the scroll. The normal <A> tag doesn't work, so I used a page refresh as a work around, but this is not effective. Can you help with a code modification that will get the scroll "back to top" from links within the code?
http://www.rspsitedesign.com/Stowe/Charlotte_CPAs_CPA_Dental_Practice_Accountants/IRS_NC_SC_DOR_Tax_Forms.html

Many thanks,
Steve

Nile
01-13-2009, 12:55 PM
Just add this to the bottom of the content in the scroller:


<a href="javascript: void(0)" onclick="moveup()">Go Up</a>

printman55
01-13-2009, 02:21 PM
Thanks for the suggestion.
I added the code to the first "Top of Page" up arrow in the scroll, the last "Top of Page" up arrow in the scroll (bottom of content) and also below the Up-Down arrow controls at the bottom. Neither seems to work as intended??
http://www.rspsitedesign.com/Stowe/Charlotte_CPAs_CPA_Dental_Practice_Accountants/IRS_NC_SC_DOR_Tax_Forms.html
Steve

Code added:
<a href="javascript: void(0)" onclick="moveup()">Go Up</a>

Nile
01-13-2009, 10:35 PM
Change it to:


<a href="javascript: void(0)" onmouseover="movedown('topofpage', 6)">Go Up</a>

printman55
01-14-2009, 02:39 AM
I made the code change to the bottom of the content as you suggested. I also changed the page link to a test page:
http://www.rspsitedesign.com/Stowe/Charlotte_CPAs_CPA_Dental_Practice_Accountants/IRS_NC_SC_DOR_Tax_Forms-Test.html
When you mouseover "Go To Top" it takes the scroll all the way to the bottom and then the up arrow control arrow doen't work?? What I'm looking for is a way to onclick get the scroll back to the top all at once.

Nile
01-14-2009, 02:41 AM
Whoa.. that was the stupidest thing I've ever done:


<a href="javascript: void(0)" onclick="moveup('topofpage', 6)">Go Up</a>

printman55
01-14-2009, 02:50 AM
I't going in the right direction onclick. The problem is still that it still locks up the up/down arrow controls??

http://www.rspsitedesign.com/Stowe/Charlotte_CPAs_CPA_Dental_Practice_Accountants/IRS_NC_SC_DOR_Tax_Forms-Test.html

Nile
01-14-2009, 02:55 AM
Right now I'm just trying to catch a fish out in the air.. But give this a try:


function moveup(id, speed){
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
if (parseInt(crossobj.style.top)<=0){
clearTimeout(moveupvar);
}
if (parseInt(crossobj.style.top)+speed<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+'px';
moveupvar=setTimeout("moveup('"+id+"', "+speed+")",20);
}

printman55
01-14-2009, 03:12 AM
Almost there!!
Two things short of perfection. 1) Right after you click on the "Go Up" and wait until it gets to the top then mouse over the down arrow control, nothing happens. Then mouse over the up arrow then back to the down arrow is moves freely. Almost seems this process clears the lockup. 2) What speed would you suggest to zip the scroll back to the top fast?

Nile
01-14-2009, 03:20 AM
Try replacing the moveup, and the movedown functions with:


function movedown(id, speed){
clearTimeout(moveupvar);
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
var contentheight=crossobj.offsetHeight;
if (parseInt(crossobj.style.top)-speed>=(contentheight*(-1)+crossobj.parentNode.offsetHeight-10))
crossobj.style.top=parseInt(crossobj.style.top)-speed+'px';
movedownvar=setTimeout("movedown('"+id+"', "+speed+")",20);
}

function moveup(id, speed){
clearTimeout(movedownvar);
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
if (parseInt(crossobj.style.top)<=0){
clearTimeout(moveupvar);
}
if (parseInt(crossobj.style.top)+speed<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+'px';
moveupvar=setTimeout("moveup('"+id+"', "+speed+")",20);
}

printman55
01-14-2009, 03:34 AM
Perfect!!!
The clearing worked great. I increased the speed to "15" and works pretty great! That I guess id sort of a trial and errow process.
Many Many Thanks!!
http://www.rspsitedesign.com/Stowe/Charlotte_CPAs_CPA_Dental_Practice_Accountants/IRS_NC_SC_DOR_Tax_Forms-Test.html

Nile
01-14-2009, 03:39 AM
I'm glad to help you... Any your welcome. ;)
It seems your topic is solved... Please set the status to resolved.. To do this:
Go to your first post ->
Edit your first post ->
Click "Go Advanced" ->
Then in the drop down next to the title, select "RESOLVED"

printman55
01-14-2009, 03:48 AM
Take care.

printman55
01-14-2009, 04:31 PM
In my excitement about the working code I did not check out the top Anchor Links which get the user down to the respective part of the scroll. For example clicking on Corporate Forms under SC Dept of Revenue talkes you down to that section ok. Then however the scroll control up down arrows will not get you back to the top of the page. It seems that the up arrow will allow the user to only go up so far and not all the way back to the top. In this application the links at the top are the most important part and I did not check this out. Please help me solve this issue.
Thanks,
Steve

http://www.rspsitedesign.com/Stowe/C...orms-Test.html
Many thanks,
Steve

printman55
01-16-2009, 01:30 AM
Just wanted to make sure Nile saw this post. Thanks

printman55
01-19-2009, 12:42 PM
Really what is needed is code to enable outside navigation that would go to designated point in the scroll area.

printman55
01-24-2009, 02:05 PM
Any help greatly appreciated...