hello,
I want to build a web page that when clicking on button the page will scroll to specific place on the page and the button color will change.
any ideas how to do that?
Thanks
Check this sample
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body { font-family: Arial; font-size: 10pt; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type = "text/javascript"> $(function () { $("#lnkScroll").bind("click", function () { $('html, body').animate({ 'scrollTop': $('#section1').offset().top }, 2000); }); }); </script> </head> <body> <div style = "width:700px"> <h2 id = "section1"> Section 1</h2> <p> This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content.</p> <br /> <h2> Section 2</h2> <p> This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content.</p> <br /> <h2> Section 3</h2> <p> This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content.</p> <br /> <h2> Section 4</h2> <p> This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content.</p> <br /> <h2> Section 5</h2> <p> This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content.</p> <br /> <h2> Section 6</h2> <p> This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content. This is a test content.</p> <br /> <a id = "lnkScroll" href = "javascript:;">Scroll to Section 1</a> </div> </body> </html>
Demo
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.