由于平滑滚动，灯箱无法打开？

Question

我正在尝试为我个人网站上的某些证书实施 CSS 仅灯箱效果。不幸的是，每当我单击要展开的图像时，它要么滚动到页面顶部，要么向下滚动一点——而不是定位全尺寸图像（我相信这是由于平滑滚动逻辑令人困惑图像目标中的井号与页面目标中的井号）。我只能通过在浏览器中手动输入地址来访问展开后的图像。有什么建议吗？？

Here is the site link.

    <div class="background-certs" id="certificates">  
  <div class="title-box">
    <h3 class="h3-web">{ certificates }</h3>
    <h4 class="h4-web">I enjoy learning</h4>
  </div>    

  <div class="cert-container">
    <a href="#cert-item-1" class="button-new">
      <div class="box1 grid-sub">
          <%= image_tag "firehose.jpg", class: "full-width-cert" %>
      </div>
      </a>
    <h4 class="h4-subtitle">software engineering bootcamp</h4>
    <p class="cert-subtitle">Dec. 2017 - Oct. 2018</p> 
  </div>

  <div class="cert-container">
    <a href="#cert-item-2" class="button-new">
      <div class="box1 grid-sub">
        <%= image_tag "udemy-js.jpg", class: "full-width-cert" %>
      </div>
    </a>  
    <h4 class="h4-subtitle">JavaScript: the weird parts</h4>
    <p class="cert-subtitle">Nov. 2018</p> 
  </div>

    <br class="clear" />

    <div class="cert-container">
      <a href="#cert-item-3" class="button-new">
        <div class="box1 grid-sub">
          <%= image_tag "udemy-algos.jpg", class: "full-width-cert" %>
        </div>
      </a> 
      <h4 class="h4-subtitle">algorithms + data structures</h4>
      <p class="cert-subtitle">Dec. 2018</p> 
    </div>

    <div class="cert-container">
      <a href="#cert-item-4" class="button-new">
        <div class="box1 grid-sub">
          <%= image_tag "udemy-shopify.jpg", class: "full-width-cert" %>
        </div>
      </a>
      <h4 class="h4-subtitle">shopify themes from scratch</h4>
      <p class="cert-subtitle">Feb. 2019</p> 
    </div>


    <div class="certificate-lightboxes">

      <div class="cert-lightbox" id="cert-item-1">
        <div class="cert-lightbox__content">
          <a href="#certificates" class="close"></a>
          <%= image_tag "firehose.jpg", class: "full-width-cert" %>
        </div>
      </div>

      <div class="cert-lightbox" id="cert-item-2">
        <div class="cert-lightbox__content">
          <a href="#certificates" class="close"></a>
          <%= image_tag "udemy-js.jpg", class: "full-width-cert" %>
        </div>
      </div>

      <div class="cert-lightbox" id="cert-item-3">
        <div class="cert-lightbox__content">
        <a href="#certificates" class="close"></a>
          <%= image_tag "udemy-algos.jpg", class: "full-width-cert" %>
        </div>
      </div>

      <div class="cert-lightbox" id="cert-item-4">
        <div class="cert-lightbox__content">
          <a href="#certificates" class="close"></a>
          <%= image_tag "udemy-shopify.jpg", class: "full-width-cert" %>
        </div>
      </div>

    </div>


    <div class="bottom-line"></div>
  </div>

/** LIGHTBOX MARKUP **/

.cert-lightbox {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: black;
  align-items: center;
  justify-content: center;
  transform: scale(0, 0);
  transition: transform ease-in-out 100ms;
}

.cert-lightbox:target {
  transform: scale(1, 1) !important;
  display: flex;
  z-index: 900;
}

.cert-lightbox__content {
  width: 65%;
  position: relative;
}

.close {
  position: absolute;
  width: 2em;
  height: 2em;
  background: red;
  top: -1em;
  right: -1em;
  border-radius: 50%;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close::after {
  content: "X";
  color: white;
  font-weight: 700;
}

平滑滚动 application.html.erb

<script type="text/javascript">
var $root = $('html, body');

$('a[href^="#"]').click(function () {
$root.animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
}, 400);

return false;
  });
  </script>

平滑滚动 scroll.js

 function scrollToHash(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
    }, 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
      };
    });
  }
}
};

  // Select all links with hashes
 $('a[href*="#"]')
  // Remove links that don't actually link to anything
   .not('[href="#"]')
  .not('[href="#0"]')
  .click(scrollToHash);

Answer 1

避免将平滑滚动侦听器附加到具有属性的链接

作为对平滑滚动初始化添加多个 .not 调用（如 .not('[href="#cert-item-1"]')）的轻微改进，您可以为每个 HTML 属性添加自定义 data-no-smooth-scroll灯箱链接（about data- attributes）：

<div class="cert-container">
  <a href="#cert-item-1" data-no-smooth-scroll class="button-new"> <!-- added on this line -->
    <div class="box1 grid-sub">
      <%= image_tag "firehose.jpg", class: "full-width-cert" %>
    </div>
  </a>
  <h4 class="h4-subtitle">software engineering bootcamp</h4>
  <p class="cert-subtitle">Dec. 2017 - Oct. 2018</p> 
</div>

<!-- also add the attribute within the `a` for #cert-item-2, etc. -->

那么JavaScript中只需要一个.not:

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .not('[data-no-smooth-scroll]') // this line was added
  .click(scrollToHash);

选择器 [data-no-smooth-scroll] 是 Has Attribute selector。

设置灯箱时删除平滑滚动侦听器

或者，您可以更改灯箱初始化代码以调用 .off('click')（假设它使用 jQuery——您没有显示该代码）。这将从选定的链接中删除任何现有的 click 事件监听器，然后再附加打开灯箱的新 click 事件监听器。

这在某些方面会更清晰，但它会引入一个要求，即在平滑滚动之后 初始化灯箱。此外，如果您添加了另一个全局点击处理程序，例如 Google Analytics，它也会删除该处理程序。所以担心以后改代码后这个方案很难继续工作

由于平滑滚动，灯箱无法打开？

Lightbox not opening due to smooth scroll?

css

jquery

lightbox

避免将平滑滚动侦听器附加到具有属性的链接

设置灯箱时删除平滑滚动侦听器