我有一个菜单和一个内容div。当用户单击菜单项时，将显示内容div，页面平滑滚动到内容div 的顶部。这是我的代码：
<div id="content">
<div id="section1">
<a id="bir" href="#icerikBaslik">1</a> <!-- This -->
<a id="iki">2</a>
<a id="uc">3</a>
<a id="dort">4</a>
</div>
</div>
<div id="icerikDiv">
<h1 id="icerikBaslik">Deneme</h1>
<p>Random content</p>
</div>
当用户单击"a id 1，（由此注释）"时，#icerikDiv 显示并滚动页面。使用此 jQuery 方法：
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 1000);
};
$(document).on('click', '#content a', function () {
$('#icerikDiv').show();
scrollToElement($(this).attr('href'));
});
菜单项就是这样。问题是，我不想失去流畅的滚动，因此我不希望刷新页面。
当用户单击另一个链接时，必须更改 #icerikDiv 的内容。页面仍会滚动到 #icerikDiv 但内容会有所不同。这就是我想要的。
如果可能的话，我想将内容数据保存在php文件中。如"菜单1.php"、"菜单2.php"等。
当用户单击链接时，我可以在不刷新页面的情况下将相关的 php 文件包含在 #icerikDiv 中吗？
我想到了：
- 为每个链接提供特定方法
- 在它们内部，显示 #menuXcontent 并滚动到 #menuXcontent
- 在同一页中写下所有内容，显示：无;
- 例如，单击菜单6链接时，显示 #menu6content 并滚动到它
但我不喜欢这样。我相信有更好的方法。
您有两个主要选项。一种就像您描述的那样，将所有内容包含在一个页面中并根据需要显示。这是一个经常使用的可行解决方案。优点是一旦页面加载，它的响应速度就非常快，因为当您单击链接时，它不需要从服务器获取数据。缺点是初始页面加载会大得多。它通常适用于各个部分非常小的网站。
第二个选项是使用 ajax 从服务器获取内容，而无需重新加载页面。Ajax 可用于从服务器获取数据或 html。如果你有一个 php 文件，它给出了你想要的 html 输出，你可以使用 .load 方便的方法：
$( "#icerikDiv" ).load( "menu1.php" );
这将从menu1.php获取数据并将其放入 #icerikDiv。
为了避免对 php 文件进行硬编码，我们可以使用一个 data 属性，以便在每个链接上声明源代码 -.HTML：
<a id="bir" href="#icerikBaslik" data-content="menu-1.php">1</a>
Javascript：
$(document).ready(function() {
$('#content a').click(function () {
$( "#icerikDiv" ).load( $(this).data('content') );
$('#icerikDiv').show();
scrollToElement($(this).attr('href'));
});
});
将div 目标放在 data 属性上并将 href 用于源 php 可能更有意义 - 但它无论哪种方式都可以工作。
您可以通过 ajax 调用从 php 文件加载内容，并使用 javascript 将其附加到页面上所需的任何位置。
阅读 ajax：http://www.w3schools.com/ajax/http://api.jquery.com/jquery.ajax/
一个简单的例子是：
$("#loadcontent").on("click", function(e){
$.ajax({
type: "get",
url: "loadcontent.php",
success: function(content){
$("#contentdiv").html(content);
}
});
});
这会将#contentdiv的内容更改为从loadcontent.php回声的内容。