大佬教程收集整理的这篇文章主要介绍了带有数据属性的jQuery ScrollTO,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<nav> <a href="#" data-attr-scroll="#section1" class="scrollto">Section 1</a> <a href="#" data-attr-scroll="#section2" class="scrollto">Section 2</a> <a href="#" data-attr-scroll="#section3" class="scrollto">Section 3</a> <a href="#" data-attr-scroll="#section4" class="scrollto">Section 4</a> <a href="#" data-attr-scroll="#section5" class="scrollto">Section 5</a> </nav> <div class="test" id="section1"> #1 Section </div> <div class="test" id="section2" data-scroll-offset="100"> #2 Section </div> <div class="test" id="section3"> #3 Section </div> <div class="test" id="section4" data-scroll-offset="200"> #4 Section </div> <div class="test" id="section5" data-scroll-offset="300"> #5 Section </div>
JS例子:
jQuery(document).ready(function($) { $(".scrollto").click(function(event) { event.preventDefault(); var defaultAnchorOffset = 0; var $anchor = $(this).attr('data-attr-scroll'); var anchorOffset = $anchor.attr('data-scroll-offset'); if (!anchorOffset) anchorOffset = defaultAnchorOffset; $('html,body').animate({ scrollTop: $anchor.offset().top - anchorOffset },500); }); });
CSS示例:
nav { position: fixed; top: 20px; right: 20px; } .test { height: 500px; }
我知道JS代码很糟糕.如果有人能帮助我,我将非常感激.
先感谢您.
问候,
丹尼
jQuery(document).ready(function($) { $(".scrollto").click(function(event) { event.preventDefault(); var defaultAnchorOffset = 0; var anchor = $(this).attr('data-attr-scroll'); var anchorOffset = $('#'+anchor).attr('data-scroll-offset'); if (!anchorOffset) anchorOffset = defaultAnchorOffset; $('html,body').animate({ scrollTop: $('#'+anchor).offset().top - anchorOffset },500); }); });
继承人,玩得开心!
以上是大佬教程为你收集整理的带有数据属性的jQuery ScrollTO全部内容,希望文章能够帮你解决带有数据属性的jQuery ScrollTO所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。