Question

我正在建立一个网站，当单击某些a标签时会打开一个覆盖图。每个链接都引用同一覆盖图内的一个部分。我以这个pen为例，但这是一个摘要：

叠加层最初的宽度为0％

当用户单击链接（例如放置在页脚中）时，覆盖层的宽度更改为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>

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

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

其中的部分是叠加层内部的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>

Answer 2

移动

<button>Close</button>

出于

<div class="overlay opened">

似乎对.overlay类的绝对位置有些混乱

平滑滚动覆盖

2 个答案: