wwfc
wwfc's Achievements
0
Reputation
-
first post - so please be gentle can anyone help me out here - i am trying to get scrollto.js to do something that it doesn't seem to want to do... if possible, i want to use greensock to recognise certain points in a layout and respond to bith the point where it is and also what the user is clicking in the menu/nav... it would then see if there were any remaining distance left in the section to scroll and once that section had finished it would skip/jump to the selected section before autoscroll to the mid point of the selected section... section 'a' is 300px in depth/duration and starts at scroll point 150px and finishes at 450px so the link would initially go to 150px and autoscroll(??) down to 300px and stop there. and if another link is clicked section 'a' continues it's scroll through to 450px then skips to the scroll height of the section selected in the same manner as above. i've seen similar navigation methods but these scroll through all and any sections in between not just a straight move from one section to another section rergardless of scroll position. so it would be like link 1 - jumps to 150px postion and auto scrolls to 300px link 2 - jumps to 500px postion and auto scrolls to 650px link 3 - jumps to 700px postion and auto scrolls to 850px and all three links play the remaining 150px of current section/sequence before making the jump... hope that makes more sense - i've tried various things with scrollto.js but it either scrolls through everything in between the points or simply skips and stops dead at whatever point... i might be asking for the moon on a stick but as there are few 'heads' on here that know this stuff - thought it worth an ask... anything anyone can give me will be most welcome - tuts/source/jsfiddles/urls... anything!!! it's kind of along these lines but more sophosticated... <!-- sample.html --> <!DOCTYPE html> <html> <head> <style type="text/css"> div.contentbox { background: #FFF; height: 500px; margin: 20px; font-size: 28px; border: #CCC 1px dashed; } #apDiv1 { position: fixed; left: 30px; top: 150px; width: 373px; height: 173px; z-index: 1; } </style> </head> <body> <div id="apDiv1"><a href="#" onclick="return false;" onmousedown="autoScrollTo('div1');">Document Section 1</a><br /> <a href="#" onclick="return false;" onmousedown="autoScrollTo('div2');"> Document Section 2</a><br /> <a href="#" onclick="return false;" onmousedown="autoScrollTo('div3');"> Document Section 3</a><br /> <a href="#" onclick="return false;" onmousedown="autoScrollTo('div4');"> Document Section 4</a></div> <h2 id="myheading"> </h2> <br /> <div id="div1" class="contentbox">Div 1 content...</div> <a href="#" onclick="return false;" onmousedown="resetScroller('myheading');"> go back to top</a> <div id="div2" class="contentbox">Div 2 content...</div> <a href="#" onclick="return false;" onmousedown="resetScroller('myheading');"> go back to top</a> <div id="div3" class="contentbox">Div 3 content...</div> <a href="#" onclick="return false;" onmousedown="resetScroller('myheading');"> go back to top</a> <div id="div4" class="contentbox">Div 4 content...</div> <a href="#" onclick="return false;" onmousedown="resetScroller('myheading');"> go back to top</a> <!-- autoScrollTo.js ... logic for a lightweight reusable external framework --> <script> var scrollY = 0; var distance = 40; var speed = 24; function autoScrollTo(el) { var currentY = window.pageYOffset; var targetY = document.getElementById(el).offsetTop; var bodyHeight = document.body.offsetHeight; var yPos = currentY + window.innerHeight; var animator = setTimeout('autoScrollTo(\''+el+'\')',24); if(yPos > bodyHeight){ clearTimeout(animator); } else { if(currentY < targetY-distance){ scrollY = currentY+distance; window.scroll(0, scrollY); } else { clearTimeout(animator); } } } function resetScroller(el){ var currentY = window.pageYOffset; var targetY = document.getElementById(el).offsetTop; var animator = setTimeout('resetScroller(\''+el+'\')',speed); if(currentY > targetY){ scrollY = currentY-distance; window.scroll(0, scrollY); } else { clearTimeout(animator); } } </script> </body> </html> ***and apologies for the long winded post!!!***