如何實現平滑滾動
[英]How to achieve smooth scrolling
問題描述
這是我的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>
1 個解決方案
解決方案1
1 2012-06-28 17:58:50
包括在PHP標記之外：
<?php
// code here
?>
<script>
// your javascript
</script>
<?php
// code here
?>
https://router.vuejs.org/如何實現原生搜索和平滑滾動滾動？
[英]How https://router.vuejs.org/ achieve native search with smooth scroll scrolling?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.