javascript - how can i make the appearance scroll and then direct to #link instead of directly going to the #link? -


when click on "products" link, directs #link. how can make appearance scrolling , go product? plz me out.

<!doctype html>     <html >     <head>     <title>vstudy</title>     <script>     function big(x){     x.style.color = "red";     x.style.fontsize = "17px";     }     function small(x){     x.style.color = "white";     x.style.fontsize ="15px";     }      </script>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <link rel= "stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />     </head>     <body >     <img src="tree.jpg" width="1340px"style="position:absolute;top:0px;height:655px">      <img src="logo.gif" height="200" width="180px"style="position:absolute;top:265px;left:600px">     <div >     <div="logo1" style="position:fixed;z-index:100">     <div id="logo" style="width:1340px;height:125px;background-color:black;opacity:0.7"></div>     <img src="logo3.gif" alt ="vstudy" "height="150px" width="130px" style="position:absolute;left:0px;top:8px">     <p>      <span class ="home" style ="position:absolute;left:150px;top:50px;font-weight:bolder;color:white;font-size:18px">where things go cybernated...</span>     <span><a href="#" style="text-decoration:none;position:absolute;right:588px;top:50px;font-weight:bold;color:white;font-size:15px" onmouseover="big(this)" onmouseout="small(this)">home</a></span>     <span><a href="#" style="text-decoration:none;position:absolute;right:455px;top:50px;font-weight:bold;color:white;font-size:15px" onmouseover="big(this)" onmouseout="small(this)">our mission</a></span>     <span><a href="#products" style="text-decoration:none;position:absolute;right:250px;top:50px;font-weight:bold;color:white;font-size:15px" onmouseover="big(this)" onmouseout="small(this)">products & services</a></span>     <span><a href="#" style="text-decoration:none;position:absolute;right:145px;top:50px;font-weight:bold;color:white;font-size:15px" onmouseover="big(this)" onmouseout="small(this)">about us</a></span>     <span><a href="#" style="text-decoration:none;position:absolute;right:20px;top:50px;font-weight:bold;color:white;font-size:15px" onmouseover="big(this)" onmouseout="small(this)">contact us</a></span>     </p>     </div>     </div>     <p  id="products" style="position:absolute;top:655px;width:1340px;height:655px">     <h1 style="position:absolute;top:780px">     products & services </h1>     </body>     </html> 

the page referring uses arbitrary anchor, accomplishes asking.


Comments

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

Website Login Issue developed in magento -

Can the constants be defined inside a model file of a framework in PHP? -