JQuery实现鼠标滚轮滑动到页面节点

下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍，并通过展示效果图展示给大家。
基于jQuery鼠标滚轮滑动到页面节点部分。这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效。效果图如下：

实现的代码。
html代码：

<section class="panel home" data-section-name="home"><div class="inner"><header><h1></h1><p class="tagline">适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<br><br>不支持IE8及以下浏览器。<br><br><br></p></header><div style="text-algin:center;margin:10px auto"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br /><a href="#overview" class="scroll">滑动鼠标滚轮</a></div></section><section class="panel overview" data-section-name="overview"><div class="inner"><h2>基本使用</h2><p>需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.</p><pre><！ doctype html><html><head><script>$（function（） {$.scrollify（{section : "section",}）;}）;</script></head><body><section></section><section></section></body></html></pre></div></section><section class="panel configuration" data-section-name="configuration"><div class="inner"><h2>配置</h2><pre>$.scrollify（{section : "section",sectionName : "section-name",easing: "easeOutExpo",scrollSpeed: 1100,offset : 0,scrollbars: true,before:function（） {},after:function（） {}}）;</pre></div></section><section class="panel options" data-section-name="options"><div class="inner"><h2>选项设置</h2><dl><dt>section</dt><dd>节点部分选择器.</dd><dt>sectionName</dt><dd>每一个section节点对应的data属性.</dd><dt>easing</dt><dd>定义缓冲动画.</dd><dt>offset</dt><dd>定义每个色彩tion节点的偏移量.</dd><dt>scrollbars</dt><dd>是否显示滚动条.</dd><dt>before</dt><dd>回调函数,滚动开始前触发.</dd><dt>after</dt><dd>回调函数,滚动完成后触发.</dd></dl></div></section><section class="panel methods" data-section-name="methods"><div class="inner"><h2>方法</h2><p>滑动到指定的节点。</p><pre>$.scrollify（"move","#name"）;</pre><div style="text-algin:center;margin:10px auto"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br /></div></section>

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实现鼠标滚轮滑动到页面节点的全部内容，希望对大家在今后的项目过程中有所帮助。