HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerDiv{ height: 200px; width: 300px; border:1px solid black; overflow: auto; } #innerDiv{ margin-top:750px; height: 2000px; width: 1000px; background:#e6e6e6; position: relative; } </style> </head> <body> <div id="outerDiv"> <div id="innerDiv"> <div style="position:absolute;top:0;">Header is Here</div> <div style="position:absolute;bottom:0">Footer is Here</div> </div> </div> <p>Click on the button to do any of the following</p> <button onclick="myContentTop()">Content Top</button> <button onclick="myContentBottom()">Content Bottom</button> <script> var elem = document.getElementById("innerDiv"); function myContentTop(){ elem.scrollIntoView(true); } function myContentBottom(){ elem.scrollIntoView(false); } </script> </body> </html>
OUTPUT
×

Save as Private