javascript - 在覆盖层内平滑滚动

Question

我正在构建一个网站，当某些 a 标签被点击时，它会打开一个覆盖层。每个链接都指向同一覆盖层内的一个部分。我做了这个pen作为示例，但这里是一个摘要:

1. 叠加层初始宽度为 0%

2. 当用户单击链接(例如放置在页脚中)时，叠加层会将其宽度更改为 100%。每个 a 标签都将叠加层内部分的 id 作为其 href 值

   <!-- Overlay -->
   <div class="overlay">
     <div id="one">...</div>
     <div id="two">...</div>
     <div id="three">...</div>
   <div>
   <!-- Triggers -->
   <a href="#one">Section one</a>
   <a href="#two">Section two</a>
   <a href="#three">Section three</a>
   

单击触发器后，我已经在更改叠加层的宽度。现在我需要在overaly中进行页面跳转，我一直在尝试这种方式:

section.scrollIntoView({ behavior: 'smooth' })

其中 section 是叠加层内的 div。我遇到的问题是，虽然在滚动，但它与那个 div 的顶部不匹配，它有一个奇怪的偏移量。现在的问题是:我该如何解决？我一直在用头撞墙，但什么也没有出来。

谢谢你的帮助

Answer 1

function smoothyScroll(element,offset,speed) {
    
    if (!element) var element = ".scroll";
    if (!offset) var offset = 0;
    if (!speed) var speed = 500;
    
    $('a'+element+':not([href=#])').click(function() {
        
        $(element).removeClass('active');
        $(this).addClass('active');
        
        offset = (!$(this).data('offset'))? offset : $(this).data('offset');
        speed = (!$(this).data('speed'))? speed : $(this).data('speed');
        
        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 + offset
                }, speed);
                return false;
            }
        }
        
    }); // end click
    
    $('a'+element+'[href=#]').click(function() {
        $('html,body').animate({
            scrollTop: 0
        }, speed);
        return false;
    }); // end click
    
}

$(function() {
  smoothyScroll()
});

* {
  font-family: Arial, sans-serif;
  color: #999;
}
h1 small {
  font-size: 0.5em;
  display: block;
  font-weight: normal;
  font-style: italic;
}
.scroll {
  color: #333;
  font-weight: bold;
}

.height1000 {
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="overlay" class="height1000">
  <h1>smoothyScroll<small>simple jquery function for smooth scrolling between sections inside the same page</small></h1>
  <p>
    You don't need a jquery plugin to obtain a cool smooth scroll inside a web page and/or applications.
  </p>
  <a class="scroll" href="#target1">Smooth Scroll Link 1</a> 
  <a class="scroll" href="#target2">Smooth Scroll Link 2</a>
</div>

<div id="target1" class="height1000">
  <h2>Target Section 1</h2>
  <p>This is the first target section.</p>
  <p>
    <a href="#" class="scroll">BackTop</a>
  </p>
</div>

<div id="target2" class="height1000">
  <h2>Target Section 2</h2>
  <p>This is the first target section.</p>
  <p>
    <a href="#" class="scroll">BackTop</a>
  </p>
</div>