screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scroll to Div Example</title> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <style> body { height: 3000px; } .scroll-to { margin-top: 500px; padding: 20px; background-color: #e0e0e0; margin-bottom: 20px; } </style> </head> <body> <h3>jQuery Scroll to Specfic Element </h3> <button class="scrollButton" data-target="targetDiv1">Scroll to Div 1</button> <div class="scroll-to" id="targetDiv1"> <h2>Target Div 1</h2> <p>This is the first div you want to scroll to.</p> </div> <button class="scrollButton" data-target="targetDiv2">Scroll to Div 2</button> <div class="scroll-to" id="targetDiv2"> <h2>Target Div 2</h2> <p>This is the second div you want to scroll to.</p> </div> <script> $(function(){ $(".scrollButton").click(function() { $('html, body').animate({ scrollTop: $("#" + $(this).data('target')).offset().top }, 1000); }); }); </script> </body> </html>