Question

我将如何添加到此平滑滚动功能以更改滚动到的ID的颜色？

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    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) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Answer 1

如果是font-color，请添加此

 target.css('color', 'red');

之后

target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

或在动画的回调函数内部：

$('html,body').animate({
    scrollTop: target.offset().top
}, 1000, function(){
    target.css('color', 'red');
});

如果要清除其他链接，可以使用：

$('a[name]').css('color', 'black');

<强>更新

在您的情况下，您要将颜色添加到p - 标记。所以你必须改变选择器：

$("p[id^='faq_']").css('color', '#707070');

Demo

<强>参考

.css()

Answer 2

你已经有了目标，所以你现在需要做的就是将完整的回调函数传递给animate方法：

$('html,body').animate({
          scrollTop: target.offset().top
        }, {
        duration: 500,
        complete: function () {
          // add a new class to trigger multiple style attributes of the selector
          target.className = "new-color";
        }
      });

Answer 3

你想在滚动的同时或之后这样做吗？要同时执行此操作，请在“return false;”之前添加它。

target.css("color","red")

之后你还需要将它改回正常状态。这取决于有多少元素是“可定位的”，但最好的方法可能是给每个元素一个相同的类。

平滑滚动时改变id的颜色

3 个答案: