How to achieve smooth scrolling
<p>This is my js code:</p>

<pre><code>$(document).ready(function(){ 
    $(".smooth").click(function(){
        var href = $(this).attr("href");
        var pos = $(href).offset().top;
        $("html,body").animate({scrollTop: pos}, 1000); 
        return false;
    });
}); 
</code></pre>

<p>It works in html file ...but it doesn't work in a php file. How could I modify the code to work with php files?</p>

<p>the full html code here:</p>

<pre><code>&lt;html&gt;&lt;head&gt;&lt;title&gt;---anchor jump&lt;/title&gt;&lt;meta content="text/html; charset=UTF-8"http-equiv="Content-Type"&gt;&lt;meta name="Generator"content="EditPlus"&gt;&lt;meta name="Author"content="lugu"&gt;&lt;meta name="Keywords"content="lugu的个人网站"&gt;&lt;meta name="Description"content="http://www.zhegu.org"&gt;&lt;script src="jquery.js"type="text/javascript"&gt;&lt;/script&gt;&lt;style&gt;body{margin:0;padding:0;background:#0c1210;font-family:arial}p,div,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.fixed{width:29px;height:35px;position:fixed;top:200px;left:900px;*position:fixed;_position:absolute;_top:200px;_left:900px;_top:expression(eval(document.compatMode&amp;&amp;document.compatMode=='CSS1Compat')?documentElement.scrollTop+200:document.body.scrollTop+(document.body.clientHeight-this.clientHeight))}.fixed li{list-style:none}.fixed li a{text-decoration:none;display:block;margin-bottom:2px;background-color:#738C65;color:#fff;padding:8px 10px}.fixed li a:hover{background-color:#ACD098;color:#fff;text-decoration:underline}.box{margin-bottom:50px}h1{color:#fff;font-size:25px;padding-left:20px}.box h2{color:#fff;font-size:20px;padding-left:20px;margin-bottom:10px}.box p{padding:15px 20px;background-color:#738C65;color:#fff;height:300px;width:50%}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;anchor jump test page&lt;/h1&gt;&lt;div class="fixed"&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="#lugu1"class="smooth"&gt;1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#lugu2"class="smooth"&gt;2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#lugu3"class="smooth"&gt;3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#lugu4"class="smooth"&gt;4&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div id="lugu1"class="box"&gt;&lt;h2&gt;lugu1-title-1&lt;/h2&gt;&lt;p&gt;this is text about lugu..this is NO.1&lt;/p&gt;&lt;/div&gt;&lt;div id="lugu2"class="box"&gt;&lt;h2&gt;lugu1-title-2&lt;/h2&gt;&lt;p&gt;this is text about lugu..this is NO.2&lt;/p&gt;&lt;/div&gt;&lt;div id="lugu3"class="box"&gt;&lt;h2&gt;lugu1-title-3&lt;/h2&gt;&lt;p&gt;this is text about lugu..this is NO.3&lt;/p&gt;&lt;/div&gt;&lt;a name="lugu4"&gt;&lt;/a&gt;&lt;div id="lugu5"class="box"&gt;&lt;h2&gt;lugu1-title-5&lt;/h2&gt;&lt;p&gt;this is text about lugu..this is NO.5&lt;/p&gt;&lt;/div&gt;&lt;script type="text/javascript"&gt;$(document).ready(function(){$(".smooth").click(function(){var href=$(this).attr("href");var pos=$(href).offset().top;$("html,body").animate({scrollTop:pos},1000);return false})});&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>
