如下所示：
[removed]
require(["jquery", "bootstrap"], function($) {
$(function() {
$('.left').height(($('body').height() > $(window).height()) ? $('body').height() : $(window).height());
});
var goTo = $(".con");
var guide = $(".sideGuide");
var guideLi = $(".sideGuide li");
var index = 0;
var direct = 0
在JavaScript编程中，实现目录链接并让内容随着目录滚动显示是一项常见的需求，特别是在网页文档或者长篇文章中。这个实例提供了一种简洁的方法来实现这一功能，主要利用了jQuery库进行DOM操作和事件处理。
代码引入了jQuery和Bootstrap库，确保我们可以方便地操作DOM元素。`$(function() {...})`是jQuery的DOM加载就绪事件，表示当DOM元素加载完成时执行内部的代码。
`$('.left').height(...)`这行代码是设置左侧导航栏（假设class为.left）的高度，使其等于body或窗口的高度，以保持整个布局的适应性。
接着，定义了一些变量，如`goTo`、`guide`、`guideLi`、`index`和`direct`。`goTo`和`guide`分别代表内容区域和侧边目录列表，`index`用于记录当前选中的目录项，`direct`用于处理滚轮事件。
`goToFun()`函数是核心部分，它计算目标目录项距离页面顶部的高度，并使用`animate`方法平滑滚动到相应位置。同时，添加和移除类名`on`来高亮当前选中的目录项。
`guideLi.each(...)`循环绑定点击事件，当用户点击目录项时，更新`index`并调用`goToFun()`。
接下来的滚轮事件处理函数`scrollFunc(e)`监听用户的滚轮操作。根据滚轮方向改变`direct`值，并根据`direct`判断是否向上或向下滚动到下一个目录项。
CSS样式用于美化页面，如设置标题样式 `.title`、内容样式 `.content`、返回顶部按钮 `.return`等，以及为目录列表 `.tree` 添加滚动效果。
这个实例展示了如何结合JavaScript和CSS来创建一个响应式的目录导航系统，当用户滚动页面或点击目录时，内容会自动滚动到对应的段落。这种交互方式提高了用户体验，特别是对于长篇内容的阅读和导航。通过理解并应用这个实例，开发者可以轻松地在自己的项目中实现类似的功能。
