平滑滚动生成：目标 div 上的活动属性

Posted 2023-05-08

【中文标题】平滑滚动生成：目标 div 上的活动属性

【英文标题】：Smooth Scroll generating :active attribute on target div

【发布时间】：2013-12-31 13:50:51

【问题描述】：

我正在使用 jQuery 滚动条滚动到页面上的某个元素。在这种情况下，它是导航栏。但是我遇到了一个奇怪的问题。单击按钮滚动到元素后，生成的元素会生成一个focus 属性。

当我单击和取消单击该元素时，它会消失并重新出现。它仅在我单击按钮滚动到该位置后发生。我尝试使用焦点标签定位 div 并将其声明为 .navbar:focus box-shadow: none; 但它不起作用

我正在使用以下内容来生成滚动效果并通过以下方式定位元素 <a href="#navigationtop" class="anchorLink">

jQuery(function($) 

  var scrollElement = 'html, body';
 $('html, body').each(function () 
  var initScrollTop = $(this).attr('scrollTop');
  $(this).attr('scrollTop', initScrollTop + 1);
   if ($(this).attr('scrollTop') == initScrollTop + 1) 
  scrollElement = this.nodeName.toLowerCase();
  $(this).attr('scrollTop', initScrollTop);
  return false;
        
   );

  // Smooth scrolling for internal links
  $("a[href^='#']").click(function(event) 
  event.preventDefault();

var $this = $(this),
target = this.hash,
$target = $(target);

$(scrollElement).stop().animate(
  'scrollTop': $target.offset().top
, 500, 'swing', function() 
  window.location.hash = target;
);

);

);

【问题讨论】：

“结果元素生成焦点属性”是什么意思？

html 元素没有“焦点”属性这样的东西。元素如何为自己生成属性？没有意义。

这是我描述它的最佳方式.....当我点击它时，它会添加我认为的框阴影，但只有在按下滚动按钮之后

您应该首先尝试在 Chrome 开发人员工具 (F12) 之类的工具中检查元素，然后查看单击滚动按钮后应用于元素的样式。您可能有一些内容你的 css 风格.. 像 a:active box-shadow: bla bla).. 需要查看你的一些 html 和 css 才能找到更多关于这里发生的事情的信息。 :)

【参考方案1】：

在您的 master.css 文件中，您有一个样式定义：

.navbar-default background: #F7F7F7!important; 
border: none!important;
box-shadow: 0 0 10px #888
-moz-box-shadow: 0 0 10px #888;
-webkit-box-shadow: 0 0 10px #888;
font-family: 'Oswald', sans-serif!important;

试试这个：

将outline: none; 添加到此样式定义中。

【讨论】：

不走运，布莱恩。那是针对我希望保留的影子。灰色#888。我需要在您单击滑块消失后出现的导航上的蓝色

嗯。我不确定你指的是什么……你使用的是什么浏览器？

我编辑了我的答案。我不确定这是否是您所指的，但试一试.. :)

并没有完全按照我想要的方式做到这一点，但它在一定程度上起作用，所以会接受答案。 Kinda最终做了一个hack来修复它。感谢您的帮助！

感谢 AlbaClan，尽我所能提供帮助。真高兴你做到了。继续。祝你好运！！ :)