JS平滑滚动不适用于追加锚点

Question

我创建了 this pen to show exactelly my problem but in short, I can't make a jQuery append anchor to work smoothly (with css-tricks 代码段），当所有 HTML 锚点都完美运行时。

如您所见，“JS 按钮”直接跳转到页面底部，但“HTML 按钮”和“返回顶部”可以顺利完成此操作。

我不明白问题出在哪里。我搜索了一个多小时没有成功所以我在这里 :p

$(document).ready(function() {

    $(function() {  
        $('a[href*="#"]')
            .not('[href="#"]')
            .not('[href="#0"]')
            .click(function(event) {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        event.preventDefault();
                        $('html, body').animate({
                            scrollTop: target.offset().top
                        }, 1000, function() {
                        var $target = $(target);
                        $target.focus();
                        if ($target.is(":focus")) {
                            return false;
                        } else {
                            $target.attr('tabindex','-1');
                            $target.focus();
                        };
                    });
                }
            }
        });
    });
  // My anchor
  $(function () {
            $('#link').append('<a href="#bottom">JS button</a>');
    });
  
  });

* {
  font-weight: bold;
}
span {
  display: block;
  margin: 20px 0;
}
a {
    color: dodgerblue;
    display: inline-block;
    margin: 8px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="link"><a href="#bottom">HTML button</a></div>
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span><span>39</span><span>40</span><span>41</span><span>42</span><span>43</span><span>44</span><span>45</span><span>46</span><span>47</span><span>48</span><span>49</span><span>50</span></div>
<div><a href="#link" id="bottom">Back to top</a></div>

Answer 1

只需将 link 嵌入代码移至淡入淡出代码上方即可。像这样：

$(document).ready(function() {
   $(function () {
     $('#link').append('<a href="#bottom">JS button</a>');
   });
   ...
});

$(document).ready(function() {

$(function () {
  $('#link').append('<a href="#bottom">JS button</a>');
});

    $(function() {  
        $('a[href*="#"]')
            .not('[href="#"]')
            .not('[href="#0"]')
            .click(function(event) {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        event.preventDefault();
                        $('html, body').animate({
                            scrollTop: target.offset().top
                        }, 1000, function() {
                        var $target = $(target);
                        $target.focus();
                        if ($target.is(":focus")) {
                            return false;
                        } else {
                            $target.attr('tabindex','-1');
                            $target.focus();
                        };
                    });
                }
            }
        });
    }); 
  });

* {
  font-weight: bold;
}
span {
  display: block;
  margin: 20px 0;
}
a {
    color: dodgerblue;
    display: inline-block;
    margin: 8px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="link"><a href="#bottom">HTML button</a></div>
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span><span>39</span><span>40</span><span>41</span><span>42</span><span>43</span><span>44</span><span>45</span><span>46</span><span>47</span><span>48</span><span>49</span><span>50</span></div>
<div><a href="#link" id="bottom">Back to top</a></div>

JS平滑滚动不适用于追加锚点

JS smooth scroll not working with append anchor

jquery

append

smooth-scrolling