Question

我遵循了Codepen上的jQuery ScrollTo教程，该教程是我在引导程序3中为粘性导航实现的。

问题： 该页面滚动良好，但浏览器将其滚动到-突出显示蓝色。参见jsFiddle。

jQuery：

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top -45,
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again

          };
        });
      }
    }
  });

JS小提琴 https://jsfiddle.net/jaredczerew/rf3nL2j8/

Answer 1

我认为这是Google Chrome的问题-我经常在链接等上看到它，但这仅在Chrome上发生。

将此添加到您的CSS文件：

.class-name-with-blue-outline {
    outline: 0;
}

Answer 2

我编辑了我的js，以执行以下操作以*解决问题：

我删除了重新定位的最后六行（动画后的回调！）。这是消除滚动到div / element的突出显示的关键。这导致了一个新的但易于修复的问题-导航中的定位标记被突出显示；快速CSS修复：
nav li a：focus { 大纲：无； }

//选择所有带有哈希的链接 $（'a [href * =“＃”]'） //删除实际上未链接到任何内容的链接 .not（'[[href =“＃”]'） .not（'[[href =“＃0”]'） .click（function（event）{ //页面上的链接如果（ location.pathname.replace（/ ^ //，''）== this.pathname.replace（/ ^ //，''） && location.hostname == this.hostname ）{ //找出要滚动到的元素 var target = $（this.hash）; 目标= target.length？目标：$（'[name ='+ this.hash.slice（1）+']'）; //是否存在滚动目标？如果（target.length）{ //仅在动画实际上会发生时才阻止默认设置 event.preventDefault（）; $（'html，body'）。animate（{ scrollTop：target.offset（）。top -45， }，1000，function（）{
```
 });
```
} } }）;

jQuery scrollTo行为突出显示元素

2 个答案: