我正在构建一个网站,当某些 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>
单击触发器后,我已经在更改叠加层的宽度。现在我需要在overaly中进行页面跳转,我一直在尝试这种方式:
section.scrollIntoView({ behavior: 'smooth' })
其中 section 是叠加层内的 div。我遇到的问题是,虽然在滚动,但它与那个 div 的顶部不匹配,它有一个奇怪的偏移量。现在的问题是:我该如何解决?我一直在用头撞墙,但什么也没有出来。
谢谢你的帮助
最佳答案
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>
关于javascript - 在覆盖层内平滑滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52188637/