下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍，并通过展示效果图展示给大家。
基于jQuery鼠标滚轮滑动到页面节点部分。这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效。效果图如下：
实现的代码。
html代码：
适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
不支持IE8及以下浏览器。
滑动鼠标滚轮
基本使用
需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.
<! doctype html>
<html>
<head>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
配置
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
选项设置
section节点部分选择器.sectionName每一个section节点对应的data属性.easing定义缓冲动画.offset定义每个色彩tion节点的偏移量.scrollbars是否显示滚动条.before回调函数,滚动开始前触发.after回调函数,滚动完成后触发.方法
滑动到指定的节点。
$.scrollify("move","#name");
js代码：
$(function () {
$(".panel").css({ "height": $(window).height() });
var timer;
$(window).resize(function () {
clearTimeout(timer);
timer = setTimeout(function () {
$(".panel").css({ "height": $(window).height() });
}, 40);
});
$.scrollify({
section: ".panel"
});
$(".scroll").click(function (e) {
e.preventDefault();
$.scrollify("move", $(this).attr("href"));
});
});
以上代码就是应用JQuery实现鼠标滚轮滑动到页面节点的全部内容，希望对大家在今后的项目过程中有所帮助。
