点击产品页上的菜单项，定位到页面指定位置上的时候，我希望可以用一个动画效果，滚动到指定的位置 .. 我们要想办法得到定位到的那个元素的垂直位置 .. 访问元素的 offset 方法的 top 属性可以得到这个位置 ..

打开页面嵌入的脚本文件...

我们可以先监听一下子导航栏上的菜单项目的点击事件 ... 先找到这些菜单项目 ...

$('.ui.sub.navbar .menu .item')

用一下 click 方法 .. 发生点击事件的时候会执行这个方法 .. 给它一个匿名函数作为它的参数 ..

先得到当前被点的菜单项元素上的 href 属性的值，这个值是页面上的一个元素的 id， 用这个 id ，我们可以得到对应的元素的垂直位置 ..

添加一个变量，名字是 id .. $(this).attr('href') ... 再添加一个变量 .. 名字是 $element .. 它的值是 $(id) .. 访问一下这个元素的 offset 方法返回的对象里的 top 属性，就是元素的垂直位置 .. 添加一个变量 .. 名字是 position ... $element.offset().top .. 这个值我希望可以往上一点 .. 可以让这个真实的值减去 60 ..

然后我们找到 body 元素 ... 用一下 animate ，添加一个滚动动画 .. 一个对象 ... scrollTop 的值设置成上面得到的这个 position ... 时长可以设置成 500 毫秒 ..

再去预览一下 ...

点击子导航栏上的菜单项 ... 会用一个动画效果把我们带到当前页面上的指定的位置上 ...