由于滚动顺畅，灯箱无法打开？

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"]')调用添加到平滑滚动初始化中略有改进，您可以为每个灯箱链接（data-no-smooth-scroll）添加自定义HTML属性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，它也会删除该处理程序。所以我担心这个解决方案很难继续工作，因为代码将来会改变。