小编Dan*_*nny的帖子

带有数据属性的jQuery ScrollTO

我真的需要帮助解决这个问题,我对JS的了解并不是那么好.所以,基本上我想滚动到单击链接时的部分,但不是通过(href ="#target"),我想用属性来做.此外,如果可能的话,我也希望从顶部添加属性偏移量.请看一下代码,你会得到一个更清晰的图片.

HTML示例:

<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>
Run Code Online (Sandbox Code Playgroud)

JS例子:

    jQuery(document).ready(function($) {
        $(".scrollto").click(function(event) {
            event.preventDefault(); 

            var defaultAnchorOffset = 0;

            var $anchor = $(this).attr('data-attr-scroll');

            var anchorOffset = …
Run Code Online (Sandbox Code Playgroud)

jquery scrollto

5
推荐指数
1
解决办法
2万
查看次数

标签 统计

jquery ×1

scrollto ×1