如何实现平滑滚动

这是我的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>

来源

2012-06-28 final

你需要证明你的PHP代码，包括如何在输出片段。你所描述和想要的东西不可能和不必要，所以你可能在包含它的方式上有错误。 –

我们可以看到完整的HTML代码吗？呈现的一个，而不是PHP版本。但给PHP版本太好了。 :) –

一旦它进入浏览器，PHP文件和HTML文件之间没有区别。看看HTML文件的代码和渲染的PHP文件。 – jaypeagi

包括PHP的标签之外：

<?php 

// code here 

?> 

<script> 
// your javascript 
</script> 

<?php 

// code here 

?>

来源

2012-06-28 17:58:50

完整的html代码已经写好了，你可以给我一个完整的PHP代码与js的工作？ – final

它的工作原理！有用！谢谢！ – final

真棒@final，请做upvote＆接受为最好 –

如何实现平滑滚动

回答

相关问题