Question

这是我的js代码：

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

它适用于html文件...但它不能在php文件中运行。我怎么能修改代码才能使用php文件？

这里的完整HTML代码：

<html><head><title>---anchor jump</title><meta content="text/html; charset=UTF-8"http-equiv="Content-Type"><meta name="Generator"content="EditPlus"><meta name="Author"content="lugu"><meta name="Keywords"content="lugu的个人网站"><meta name="Description"content="http://www.zhegu.org"><script src="jquery.js"type="text/javascript"></script><style>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&&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%}</style></head><body><h1>anchor jump test page</h1><div class="fixed"><ul><li><a href="#lugu1"class="smooth">1</a></li><li><a href="#lugu2"class="smooth">2</a></li><li><a href="#lugu3"class="smooth">3</a></li><li><a href="#lugu4"class="smooth">4</a></li></ul></div><div id="lugu1"class="box"><h2>lugu1-title-1</h2><p>this is text about lugu..this is NO.1</p></div><div id="lugu2"class="box"><h2>lugu1-title-2</h2><p>this is text about lugu..this is NO.2</p></div><div id="lugu3"class="box"><h2>lugu1-title-3</h2><p>this is text about lugu..this is NO.3</p></div><a name="lugu4"></a><div id="lugu5"class="box"><h2>lugu1-title-5</h2><p>this is text about lugu..this is NO.5</p></div><script type="text/javascript">$(document).ready(function(){$(".smooth").click(function(){var href=$(this).attr("href");var pos=$(href).offset().top;$("html,body").animate({scrollTop:pos},1000);return false})});</script></body></html>

Answer 1

包含在PHP标记之外：

<?php 

 // code here

?>

<script> 
 // your javascript
</script>

<?php

 // code here

?>

如何实现平滑滚动

1 个答案: