我的网站有这个代码
function clickMe() {
var element = document.getElementById('about');
element.scrollIntoView({
block: "start",
behavior: "smooth",
});
}
这非常好用，但是我有一个固定的标题，所以当代码滚动到元素时，标题会挡住。
有没有办法获得一个偏移并让它顺利滚动？
答案 0 :(得分：16)
SørenD.Ptæus的回答让我走上了正确的轨道，但getBoundingClientRect()时我遇到window的问题。
我的解决方案为他增加了一点，让getBoundingClientRect()更加一致地工作更加通用。我使用了here概述的方法并实现了它以使其按预期工作。
const element = document.getElementById('targetElement');
const offset = 45;
const bodyRect = document.body.getBoundingClientRect().top;
const elementRect = element.getBoundingClientRect().top;
const elementPosition = elementRect - bodyRect;
const offsetPosition = elementPosition - offset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
请务必在实施时加入polyfill！
答案 1 :(得分：13)
有没有办法获得一个偏移并让它顺利滚动？
Element.scrollIntoView()的 scrollIntoViewOptions 不允许您使用偏移量。当您想要滚动到元素的精确位置时，它非常有用。
然而，您可以使用Window.scrollTo()选项同时滚动到偏移位置，并顺利。
如果您的标题高度为30px，则可以执行以下操作：
function scrollToTargetAdjusted(){
var element = document.getElementById('targetElement');
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
}
这将平滑地滚动到您的元素，以便它不会被标题阻止查看。
注意：您可以减去偏移量，因为您希望在将标题滚动到元素上之前停止。
您可以在下面的代码段中比较两个选项。
<script type="text/javascript">
function scrollToTarget() {
var element = document.getElementById('targetElement');
element.scrollIntoView({
block: "start",
behavior: "smooth",
});
}
function scrollToTargetAdjusted() {
var element = document.getElementById('targetElement');
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
}
function backToTop() {
window.scrollTo(0, 0);
}
</script>
<div id="header" style="height:30px; width:100%; position:fixed; background-color:lightblue; text-align:center;"> <b>Fixed Header</b></div>
<div id="mainContent" style="padding:30px 0px;">
<button type="button" onclick="scrollToTarget();">element.scrollIntoView() smooth, header blocks view</button>
<button type="button" onclick="scrollToTargetAdjusted();">window.scrollTo() smooth, with offset</button>
<div style="height:1000px;"></div>
<div id="targetElement" style="background-color:red;">Target</div>
<br/>
<button type="button" onclick="backToTop();">Back to top</button>
<div style="height:1000px;"></div>
</div>
答案 2 :(得分：2)
我知道这是一种黑客行为，绝对应该谨慎使用，但实际上您可以向元素添加padding和负数margin。我无法保证它会为您工作，因为我没有您的标记和代码，但是我遇到了类似的问题，并使用此替代方法来解决它。
假设标题为30px，并且您希望偏移量为15px，然后：
#about {
padding-top: 45px; // this will allow you to scroll 15px below your 30px header
margin-top: -45px; // and this will make sure that you don't change your layout because of it
}
答案 3 :(得分：1)
这里是我基于@ekfuhrmann's answer写的函数。
它将需要滚动到的元素作为第一个参数，将对象形式的其他选项作为第二个参数，类似于window.scrollTo()函数的工作方式。
function scrollToTarget(element, options) {
if (options.headerHeight === undefined) {
options.headerHeight = 0;
}
var elementRect = element.getBoundingClientRect();
// If an element has 0 height, then it is hidden, do not scroll
if (elementRect.height == 0) {
return;
}
var offset = elementRect.top - options.headerHeight;
if (options.block == 'center') {
// If an element's height is smaller, than the available screen height (without the height of the header), then add the half of the available space
// to scroll to the center of the screen
var availableSpace = window.innerHeight - options.headerHeight;
if (elementRect.height < availableSpace) {
offset -= (availableSpace - elementRect.height) / 2;
}
}
var optionsToPass = {
top: offset
};
if (options.behavior !== undefined) {
optionsToPass.behavior = options.behavior
}
window.scrollBy(optionsToPass);
}
主要区别在于它使用window.scrollBy()函数而不是window.scrollTo()，因此我们不需要在body上调用.getBoundingClientRect()。
options 参数可以包含 headerHeight 字段 - 它可以包含屏幕上固定元素的高度，滚动到元素时需要忽略。
这个函数也可以有一个 block 选项，目前只能接受一个 "center" 值。设置后，滚动到的元素将出现在屏幕中央，不包括固定元素高度。默认情况下，滚动将应用于元素的顶部。
这里我们有两个位置固定的重叠元素。假设其中最大的一个在某些视口宽度上不可见，因此我们需要动态获取可用视口高度减去固定元素的高度。
以下示例演示，如果 block 选项设置为 "center"，元素将出现在可用视口高度的中心，类似于 Element.scrollIntoView() 函数的工作方式。
function scrollToTarget(element, options) {
if (options.headerHeight === undefined) {
options.headerHeight = 0;
}
var elementRect = element.getBoundingClientRect();
if (elementRect.height == 0) {
return;
}
var offset = elementRect.top - options.headerHeight;
if (options.block == 'center') {
var availableSpace = window.innerHeight - options.headerHeight;
if (elementRect.height < availableSpace) {
offset -= (availableSpace - elementRect.height) / 2;
}
}
var optionsToPass = {
top: offset
};
if (options.behavior !== undefined) {
optionsToPass.behavior = options.behavior
}
window.scrollBy(optionsToPass);
}
var headerElements = [
document.querySelector('.header__wrap'),
document.getElementById('wpadminbar')
];
var maxHeaderHeight = headerElements.reduce(function (max, item) {
return item ? Math.max(max, item.offsetHeight) : max;
}, 0);
document.getElementById('click-me').addEventListener('click', function() {
scrollToTarget(document.querySelector('.scroll-element'), {
headerHeight: maxHeaderHeight,
block: 'center',
behavior: 'smooth'
});
});body {
margin: 0;
height: 1000px;
}
#wpadminbar, .header__wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
}
#wpadminbar {
height: 32px;
background-color: #1d2327;
z-index: 2;
opacity: 0.8;
}
.header__wrap {
margin: 0 15px;
height: 74px;
background-color: #436c50;
z-index: 1;
}
.scroll-element {
margin-top: 500px;
padding: 1em;
text-align: center;
background-color: #d7d7d7;
}
#click-me {
margin: 100px auto 0;
padding: 0.5em 1em;
display: block;
}<div id="wpadminbar"></div>
<div class="header__wrap"></div>
<button id="click-me">Click me!</button>
<!-- Some deeply nested HTML element -->
<div class="scroll-element">
You scrolled to me and now I am in the visual center of the screen. Nice!
</div>答案 4 :(得分：1)
还有滚动边距和滚动填充。
对我来说，滚动填充对这类东西最有用。
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
/* Keyword values */
scroll-padding-top: auto;
/* <length> values */
scroll-padding-top: 10px;
scroll-padding-top: 1em;
scroll-padding-top: 10%;
/* Global values */
scroll-padding-top: inherit;
scroll-padding-top: initial;
scroll-padding-top: unset;
它可能与 Internet Explorer 不兼容。
答案 5 :(得分：0)
我尝试了其他解决方案，但出现了一些奇怪的现象。但是，这对我有用。
function scrollTo(id) {
var element = document.getElementById(id);
var headerOffset = 60;
var elementPosition = element.offsetTop;
var offsetPosition = elementPosition - headerOffset;
document.documentElement.scrollTop = offsetPosition;
document.body.scrollTop = offsetPosition; // For Safari
}
和样式：
html {
scroll-behavior: smooth;
}
答案 6 :(得分：0)
简单但优雅，如果元素的高度很小：
block: center{{1}}使元素位于页面的垂直中心，因此顶部标题不会覆盖该元素。
答案 7 :(得分：0)
通过一个非常小的技巧，您可以使用 scrollIntoView()
<section id="about">
<p>About title</p>
<p>About description</p>
</section>
<section id="profile">
<p>About title</p>
<p>About description</p>
</section>
<section>
<span className="section-offset" id="about"></span>
<!-- or <span className="section-offset" id="about" /> for React -->
<p>About title</p>
<p>About description</p>
</section>
<section>
<span className="section-offset" id="profile"></span>
<p>Profile title</p>
<p>Profile description</p>
</section>
.section-offset {
position: relative;
bottom: 60px; // <<< your offset here >>>
}
将元素选择器移动到section内的一个span，然后你可以在span上使用position: relative（顶部/底部放置不影响页面上的其他元素）来设置所需的偏移量。如果您需要底部偏移，请将 span 元素放在您的部分的末尾（例如：在 </section> 之前）。
答案 8 :(得分：-1)
let t=document.querySelector("body");
document.addEventListener("keypress",(e)=>{
if(e.key=="t"){
t.scrollIntoView(true,{block:start,behaviour:smooth});
}
if(e.key=="b"){
t.scrollIntoView(false,{block:start,behaviour:smooth});
}
});<h1>Press t to go to top of the page <br />
Press b to go to bottom of the page
</h1>
<h2 id="s1">Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi ipsum
rem placeat ullam vero animi adipisci laboriosam libero quidem quisquam
quam quae veniam, exercitationem aspernatur quaerat qui harum maiores
tenetur vel magnam temporibus dolor modi deserunt. Excepturi nesciunt sint
velit blanditiis provident modi voluptate, corrupti fugit est minima quae
qui praesentium minus cupiditate aut! Ipsam voluptatum dolores hic quis
excepturi, eveniet nobis nulla tenetur. Pariatur dolore dolorum nobis
commodi, quo amet saepe quae magnam eius! Ex vero consectetur delectus
aliquid! Minima culpa possimus dicta iste excepturi aut quia officiis
reiciendis animi perspiciatis neque, deserunt minus beatae voluptates
veritatis rerum tempore molestias reprehenderit dolorem suscipit
repellendus esse non optio? Necessitatibus magni alias cumque repellendus
blanditiis tempora incidunt beatae labore in explicabo illo enim nisi quos
corrupti dolor adipisci ipsam, reprehenderit dolores vero. Labore ad, non
quos nam reiciendis sapiente molestias nobis, facilis placeat voluptatibus
perspiciatis dolorem voluptatem ipsum. Sint accusantium libero, fugiat
quibusdam delectus quia nostrum minima sequi illo quidem magni rem ex et
quasi ab error omnis eligendi odit repellat provident expedita
perspiciatis iusto! Adipisci, molestiae! Eaque delectus molestiae facilis
amet quis sed laudantium, quas ullam inventore ipsum nam adipisci hic?
Magnam nulla culpa pariatur at. Rem alias, ducimus ea atque omnis culpa
fuga, pariatur vel unde ad expedita in aliquid consequuntur excepturiuis
obcaecati sequi recusandae perferendis facere. Magnam voluptatibus
asperiores ratione voluptate hic repellat reprehenderit sequi quisquam.
Consequuntur quos, explicabo delectus beatae labore tenetur perspiciatis
ipsum consequatur obcaecati sunt necessitatibus est dolorem vero odit
exercitationem nam architecto itaque iusto fugit consectetur rerum
laboriosam rem ducimus ad? Tempore, soluta eius id sed, expedita
consectetur unde consequatur doloremque iure dolore enim molestias maiores
commodi cum vitae aut aliquid, sapiente sit dicta assumenda quibusdam. Et,
distinctio voluptatem voluptas omnis eaque qui sapiente dicta voluptate
quos dolores vel magni inventore sunt quisquam ipsa recusandae eveniet
quibusdam, saepe repudiandae itaque quia doloremque mollitia quis nobis!
Sapiente dolorem quae fugiat deleniti molestias fuga odit eveniet
voluptatibus nostrum beatae porro dolore soluta officiis, aspernatur,
sequi est! Blanditiis velit et dolor, aut deserunt quod quasi totam! Ipsam
perferendis culpa maxime! Aliquid quisquam delectus eum iste consectetur
sit labore voluptas? Autem voluptatibus, excepturi numquam repellendus
quaerat dolorem, obcaecati eum inventore qui similique odit, optio
adipisci consequatur. Ullam sequi reiciendis harum in amet eligendi eum
recusandae. Deleniti ullam facilis voluptatem blanditiis recusandae!
Provident animi porro architecto earum sunt soluta voluptas eaque quaerat
hic odio deleniti impedit velit qui alias corporis sed, obcaecati
consequatur quo omnis sit et. Deleniti ea delectus non iusto expedita
laborum, itaque nesciunt nisi inventore recusandae eveniet. Reprehenderit
nesciunt fugit atque iste omnis error possimus molestias laudantium at,
culpa natus amet qui dolore sint commodi adipisci repudiandae dignissimos
voluptate provident illum quo! Iusto natus illum nisi harum dolore culpa,
corrupti doloribus nesciunt sed consequatur animi adipisci ratione, odio
soluta reiciendis veniam dicta dolores est et maiores eius nostrum totam
quidem. Magnam aperiam nisi ut maxime aspernatur, autem dolorum cum, ex
laborum temporibus, neque necessitatibus fugiat! Dignissimos corrupti
doloribus voluptate nam deleniti saepe, dolor sit. Voluptatem autem
reiciendis suscipit ut porro optio delectus dolores iusto, molestiae vel
quos eaque esse, fugit facere. Amet quod distinctio, illum ullam possimus
laborum aut explicabo eos tempore repellendus dolorem sunt tempora
eligendi laboriosam sit temporibus aperiam similique. Accusantium labore
eligendi animi adipisci magni, veritatis non libero! Asperiores doloribus
fugit, fugiat distinctio consequatur tempora totam illo iste earum, unde
accusantium enim similique! Quidem cupiditate culpa, dignissimos unde sint
nihil fugit commodi nemo odio at facilis eveniet. Molestias vel neque id
quas a delectus pariatur iure eaque vitae ea, deserunt laborum repellat,
voluptatum beatae ducimus perspiciatis dolorem libero repellendus error
possimus, alias maxime? Molestiae vitae iusto veniam quo et exercitationem
eos suscipit tenetur incidunt eaque ducimus quaerat eum ex autem, quia
tate,
libero reprehenderit molestiae numquam dolorem pariatur distinctio
veritatis accusamus alias. Nisi iure quasi dicta repellat placeat, quis
inventore? Doloribus, distinctio consequatur! Fuga deleniti placeat
perspiciatis mollitia sequi labore cupiditate minus cum assumenda,
quibusdam quia accusantium natus expedita porro quasi voluptatibus magni
esse nihil illum id illo. Quos ipsa magni facilis sed distinctio cum
aspernatur necessitatibus, voluptates temporibus officiis placeat qui
saepe provident enim fugit voluptate minima repellat labore dolores, vero
velit amet nesciunt esse? Delectus eligendi ullam accusamus consequatur
blanditiis aspernatur maiores libero neque dolor quae fugit, alias
repellat ex unde fuga est. Quibusdam pariatur rerum dicta similique
facilis rem voluptatibus. Doloremque, quisquam similique! Odit incidunt
quos illo ex voluptatibus, nam blanditiis rerum accusamus aperiam atque
ebitis
deserunt? Eveniet et laboriosam velit provident quasi quaerat quibusdam
eos, animi vel. Amet placeat velit, aspernatur voluptatem quidem
reiciendis impedit totam fuga labore perspiciatis officia commodi repellat
modi nisi. Aut asperiores ad repellat mollitia vel illum, sunt distinctio
corrupti inventore quos hic quas facilis molestias unde minus dicta rem
maiores eveniet soluta quia maxime iste provident nesciunt voluptatibus!
Expedita, dolorum blanditiis magnam porro accusamus asperiores beatae ex
molestias odit neque quo repellendus aperiam ea voluptate a enim iure
numquam fugit tenetur! Harum accusantium molestias ipsa consectetur
eligendi, deserunt praesentium ratione non aliquid quo recusandae quas
libero distinctio dicta et, in quos doloribus sit labore vel cupiditate
minima iste officia repudiandae. Nemo impedit sit itaque rerum soluta quos
facilis praesentium alias illum necessitatibus cumque excepturi doloremque
laboriosam dolorum blanditiis eos hic pariatur est debitis, maiores
voluptatum nisi. Totam, soluta nesciunt pariatur, odio doloribus nobis
error debitis enim facere cupiditate velit maxime earum itaque quibusdam
voluptatibus modi ut, hic esse? Ex nobis neque itaque pariatur eius ab
incidunt nisi ullam laboriosam quibusdam voluptatibus dolores suscipit,
minus nostrum, deleniti iusto reiciendis. Accusamus iste est commodi
accusantium delectus. Tenetur rerum maiores sed odit dolores. Odio
assumenda dolorem maiores doloremque dicta aliquam rem enim numquam est
voluptate sed corporis facere illo molestias sit at, minus reiciendis
eaque repellat? Voluptates quo maxime eum quasi totam odit laborum
molestiae sunt cupiditate numquam? Dignissimos similique reprehenderit,
repellendus placeat, vel fugiat id labore nemo ab a explicabo itaque nisi
saepe quidem magni impedit pariatur odio, et consectetur ducimus quos
laborum voluptas vitae eveniet! Beatae doloremque omnis, hic accusantium
explicabo quaerat obcaecati quae aspernatur illum natus, repellat
perspiciatis et asperiores provident totam. Doloribus odio sequi, fugiat
repudiandae minima soluta tempora vitae explicabo voluptas officia
distinctio cupiditate adipisci unde. Aspernatur, inventore quasi.
Quisquam, in fugiat doloribus vel omnis similique dolorem, inventore est
esse eum perspiciatis minus vero molestiae explicabo delectus libero ab
repudiandae? Est rem magnam exercitationem quia, quaerat excepturi
voluptatibus provident asperiores eius qui molestias laborum nemo dolor
officiis ab explicabo tempora tenetur nisi harum repellat consequatur
doloremque. Vel, ut deserunt. Numquam alias labore officia nam modi,
minus, temporibus voluptates libero doloribus quasi maxime similique
magnam est atque, omnis doloremque nisi tempora eaque beatae velit! Rerum
ipsum laborum, numquam nesciunt placeat recusandae corrupti neque at
molestiae sint odit ipsam provident necessitatibus voluptate ipsa
explicabo perferendis magni ab magnam praesentium voluptatum suscipit
aperiam dolores. A explicabo cupiditate nostrum iusto distinctio
voluptatum quam expedita, magni assumenda atque adipisci fuga pariatur,
quod exercitationem aspernatur maiores corporis sequi, accusantium
voluptas molestiae aliquid fugit eius tempora dolore. Assumenda sed
accusantium quia quisquam necessitatibus officiis modi in, quos,
laudantium maxime asperiores officia. Asperiores provident, nisi voluptate
debitis praesentium quaerat amet temporibus hic tempora dignissimos,
officia reprehenderit natus veniam nostrum blanditiis, numquam molestiae
sit culpa consectetur facere aliquam adipisci! Nam, corrupti voluptatibus
molestias placeat quo rem laboriosam magnam consectetur iste ullam
sapiente distinctio error iusto id optio pariatur ea excepturi vitae?
Magnam tempore mollitia ex necessitatibus? Numquam corporis, aliquam vitae
porro consectetur doloribus tempora libero vero eos quibusdam distinctio
ullam? Alias, ullam sequi minus debitis dolorum animi nulla fugit, eos ex,
saepe at quibusdam libero odit repudiandae? Dignissimos, aut sint.
Deserunt est error, provident, soluta fuga alias possimus molestias
laborum quasi dolorum a. Nesciunt consequatur porro distinctio tenetur
possimus, iure sit deserunt veniam omnis amet reiciendis. Temporibus odio
recusandae delectus impedit totam consequatur beatae corrupti id esse
repudiandae, sed ut saepe voluptatem nisi accusamus similique quisquam
excepturi amet. Harum rem consequatur mollitia minima at vitae corporis
quis cupiditate iste maiores praesentium dolorem culpa reprehenderit
officiis, eaque voluptatum accusantium dolores natus asperiores odit vel
neque. Fugit, sit error ipsa in alias atque numquam explicabo odio natus
harum, id nam! Repellendus obcaecati illum doloribus facilis. Delectus
voluptatem maxime nobis deserunt eius eaque magni voluptas tempora hic
eveniet, laborum neque, minima, velit possimus. Assumenda consequatur quas
consectetur rem labore aspernatur, esse quaerat, ipsum iure maxime autem
necessitatibus veritatis similique suscipit impedit facere odio doloribus
dolores incidunt laudantium. Quaerat doloremque vel velit impedit
molestias consequuntur, provident animi officiis ipsam expedita suscipit.
Laborum alias quas veniam. Quos deserunt sapiente ex doloremque, expedita
architecto autem consequuntur. Commodi nobis voluptatibus cupiditate
accusantium iure molestias repellat, cumque voluptate distinctio, eum modi
voluptates, dignissimos illum molestiae eius magnam consectetur
consequatur hic? Quo hic quod labore ex quisquam quos error nesciunt
itaque cupiditate odit minus quasi dolorum non officiis doloremque,
consequatur id rerum explicabo recusandae! Reiciendis accusamus
consequatur corporis recusandae cupiditate libero illum aperiam.
Similique, atque deserunt sequi, quis, est id libero earum iusto hic
provident vel. Cupiditate, provident tempore voluptatum quibusdam id earum
sequi mollitia vitae aliquid, soluta iure veritatis officiis ipsum
incidunt non eum quos hic! Fugiat ut dicta dignissimos earum, alias iste
officia quidem placeat nesciunt officiis et magni autem fuga voluptates
temporibus porro numquam sint facilis dolorem aut aliquam ex tenetur
reiciendis. Commodi at aperiam hic sequi, ratione perferendis a qui
eligendi fuga optio nihil vel minus, facilis quos! Consectetur nesciunt
corporis odit temporibus officia porro, numquam, ratione cupiditate,
possimus deleniti nam. Dolorem blanditiis ad saepe odio dolorum veniam
doloremque error in voluptates eos ea asperiores itaque, dicta dolor quasi
nulla quis alias aliquid, nobis eveniet. Nam quam nisi architecto, eius
magnam aut exercitationem aspernatur doloribus, iusto, fugit amet quod
odio temporibus. Consectetur aspernatur ab voluptatem, in voluptatum
excepturi magni hic non, itaque ad quisquam! Ex inventore repellat magni
quaerat assumenda magnam adipisci consectetur sit explicabo officiis
possimus optio, voluptas doloribus rerum, doloremque similique sapiente
commodi. Eligendi ea porro, ad praesentium recusandae vitae laudantium
sunt placeat numquam tempora rerum nobis, eum cumque magnam non.
Aspernatur quae dolore nemo quasi saepe, id blanditiis repudiandae
provident molestias rerum nesciunt similique quos eaque ab facere earum
dolor illo ipsam? Debitis enim eius sint sequi dignissimos ipsa unde,
natus repudiandae accusamus laborum iste esse, quod, non ex praesentium
repellat ullam sapiente perferendis dolores? Impedit sequi consectetur
velit pariatur facilis omnis perspiciatis odit officiis libero, optio
delectus labore ullam unde a voluptate? Consectetur saepe sed harum fugit
magnam accusamus labore ab repudiandae aperiam quae blanditiis pariatur a
officiis ut esse eligendi amet veniam maiores architecto soluta magni,
ipsam repellendus dolores? Dolor libero sapiente non officia ullam quis
quas tenetur itaque laudantium consectetur fugiat deleniti repellat rem
dicta, voluptatibus aspernatur omnis nesciunt facere explicabo,
necessitatibus odio, sit ex recusandae? Praesentium illo quo tenetur vel
iure ipsa consectetur. reprehenderit. Ea architecto autem nemo voluptatem
aliquam deleniti ducimus unde?
</p>
<h2 id="s2">Section 2</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni vel
voluptas debitis. Ipsa architecto aspernatur quaerat praesentium magni.
Perspiciatis saepe molestiae esse consequuntur dolorem exercitationem
asperiores sit, eos odio, est repellat veritatis voluptate modi.
Consequatur eos a quisquam quidem illum, labore aliquid sunt voluptas
mollitia saepe animi voluptate iure cum ducimus quaerat autem optio iste
suscipit tempore. Iure recusandae nam necessitatibus autem ipsa nihil
uos vero
reiciendis voluptatum itaque iure sapiente iusto eaque ullam quis quas est
laborum obcaecati aperiam cum ratione? Magnam sed nulla libero officia
cupiditate voluptas consequatur! Fugit, provident molestias facere
suscipit laborum aliquid repellendus voluptates tempora eos commodi dolore
omnis odit et hic modi animi, dolorem obcaecati accusantium nihil eum
delectus? Unde accusantium quasi magnam perspiciatis exercitationem
cupiditate at molestiae doloribus, architecto illum corporis tempore
dolores voluptas in explicabo culpa debitis alias, repudiandae natus?
Provident cum rem ipsum. Ipsum odio dolorem eos id debitis repellendus
placeat ratione tempore possimus voluptatibus error, ad deleniti
perspiciatis vel cum quibusdam, voluptate, ipsam voluptates nam voluptas
rem! Quo non expedita earum delectus temporibus, nostrum reiciendis alias
commodi laboriosam optio iusto consectetur, sint culpa minus ea cupiditate
distinctio voluptatem nisi deserunt! Illum eveniet quia aperiam dicta
enim. Quia illo non at! Eaque vel repellat, unde minima rem temporibus
sint quisquam, ipsum, modi ex blanditiis. Molestiae sit molestias ex
animi, officia aut, excepturi porro rem pariatur, ipsam ea recusandae
corporis quaerat alias dignissimos odit similique. Cum tenetur est neque
sed quis aperiam sapiente possimus adipisci nam, magni repellendus minus
id incidunt! Ipsa at tempore repellat incidunt tenetur quaerat provident!
Reiciendis odio at itaque nam! Quidem modi, distinctio excepturi nam
molestias quas, necessitatibus ad, iure error a nulla quae repellat ipsa
aliquam. Unde voluptatibus distinctio impedit. Porro, provident
repellendus ipsam voluptates veniam non laboriosam molestiae amet
accusantium consequatur illo necessitatibus quo officiis sapiente eligendi
rem iusto qui unde, illum, recusandae quod! Magnam eaque optio deserunt
officia quibusdam magni cumque dolor atque placeat cum consectetur vel
quam modi a voluptate obcaecati expedita, nulla itaque neque incidunt
totam, perspiciatis dicta minus! Voluptas error blanditiis corrupti
mollitia dolorem, illo dicta aliquid officiis tempora iste nulla facere,
quo hic! Reprehenderit ea facere labore voluptates dolore accusamus
ducimus placeat distinctio. Illum tempora labore obcaecati! Repudiandae,
at maxime perspiciatis ex, totam maiores deserunt a quibusdam dolores
cumque, cum facere! Esse nemo tempora impedit iure sapiente eligendi non
excepturi, reiciendis praesentium autem a architecto alias maiores totam
mollitia minima atque facilis quas! Perferendis vero corporis explicabo
autem mollitia esse beatae dignissimos error cumque assumenda tenetur
commodi, animi dolorem necessitatibus sapiente. Qui magnam adipisci
inventore repellendus consequatur tempore eveniet unde. Doloribus, officia
quasi et aperiam quidem sapiente asperiores iusto? Magnam, in sed?
Provident atque omnis temporibus voluptate? Maxime nesciunt nisi debitis.
Quo veniam corrupti itaque, vitae quae debitis? Adipisci ipsam voluptates
dolores mollitia nesciunt reiciendis error provident laboriosam? Officia
tempora alias numquam est asperiores modi veritatis et reiciendis nisi ut
corporis quam, odit deserunt omnis odio ad iure maxime explicabo aut
aliquam, rem adipisci exercitationem sunt! Fuga officiis, tempore,
doloribus rerum esse alias dolores nam, cupiditate vero non aperiam
praesentium perferendis ipsam voluptatem saepe exercitationem! Adipisci
quaerat delectus, quia magni provident commodi in sint quod inventore
explicabo! Repudiandae, veritatis dolorem obcaecati non possimus
cupiditate eos dolorum veniam commodi dignissimos esse blanditiis repellat
tempore impedit ex fugit incidunt autem, quo culpa minus! Quisquam
reprehenderit error esse excepturi, similique tempora quas quis. Facere
magnam quae earum hic numquam dignissimos quia exercitationem impedit
blanditiis cum soluta deleniti nobis cumque suscipit possimus placeat
iusto asperiores, perferendis fuga consectetur nesciunt ipsum fugit!
Fuipit.
Praesentium pariatur dolores vitae dicta optio error, consectetur, ex
earum obcaecati exercitationem est, facilis nesciunt perferendis odit unde
quia corporis voluptates consequatur veniam recusandae ducimus eum ea
nihil. Natus nostrum illo eaque veniam. Ex itaque esse tempore quam.
Labore, excepturi vitae. Nobis totam minus officiis perspiciatis corrupti
ipsa, nemo ipsum numquam in adipisci! Amet molestias doloribus velit ea,
natus, sint optio dolores autem, earum nesciunt aliquid inventore
pariatur? Eos perspiciatis error veritatis quod pariatur non quisquam,
harum magnam saepe nihil soluta dolor laudantium, commodi eaque adipisci.
Deleniti laudantium omnis, provident odio eius ad officiis consequuntur
possimus id iusto sed velit! Ducimus dicta eius illo molestiae veniam
esse. Magni, explicabo adipisci excepturi illo quo molestiae ullam iste.
Eum alias, enim voluptatum beatae neque culpa ducimus repellendus dolore
illum perspiciatis ipsa consequatur fuga necessitatibus exercitationem,
rem minima, qui iure molestias nihil nulla explicabo cumque nemo esse
deserunt? Dignissimos aperiam accusamus quae deleniti voluptate laboriosam
iure o
expedita cumque laboriosam quibusdam dolorem consectetur eveniet!
Excepturi perspiciatis odit provident earum similique possimus a, esse
voluptatum in, sint et modi, dolorum molestias quasi vitae ea blanditiis
tempore quam soluta atque saepe. Necessitatibus, a. Nihil porro est
quaerat suscipit omnis praesentium explicabo fugiat distinctio, quis et
ipsum veniam ab animi illo dolore eum nostrum, unde nesciunt. Optio
officia tempora natus unde, harum neque deserunt est nobis, reprehenderit
praesentium illo iure cumque corrupti saepe asperiores! Harum sequi quos
atque soluta mollitia tempora error veritatis, perspiciatis repellendutate
porro atque aliquid est deleniti voluptates odit provident ratione veniam
consequuntur ex ipsum dolore, dolorum illum hic similique fugit sed
doloribus dicta doloremque sint labore explicabo. Hic, consequuntur ipsum!
Ducimus minima quia dicta maiores ea quis, in suscipit magni animi
laudantium mollitia excepturi recusandae soluta rerum consequatur,
eligendi obcaecati officia? Quibusdam ipsam ab, numquam enim molestias
perferendis assumenda in ea ad eos at, nobis pariatur facere eum odit
minima! Eaque, dolor eos voluptas excepturi harum dicta magni aspernatur
consequatur deserunt rerum dolorum illum, nihil ad pariatur quidem nostrum
sunt. Distinctio assumenda dolorum, soluta veritatis explicabo accusantium
mollitia! Ratione dolores molestias vitae? Libero fuga ut possimus nobis
magnam voluptates distinctio? Facere illo illum natus doloremque est
dolorem saepe, molestias quaerat aspernatur sapiente? Nihil maxime iste
placeat id voluptatem possimus eum doloremque ipsum aperiam rem, quo
quidem voluptatibus sint quae cum dolorem, culpa nemo. Tempora veniam
facilis provident nisi officiis, iure, dolore vero porro distinctio quam
asperiores modi consequatur eveniet quod, velit accusamus minus ea. Sunt
illum quo ullam consequuntur, sequi quia quidem repellat rem sed
dignissimos accusamus assumenda vel libero esse odit natus nihil itaque.
Beatae quibusdam earum, nulla odit eveniet aperiam libero esse tempore?
Ullam recusandae, maiores quaerat id dolores nobis? Exercitationem
molestias voluptatem nemo, itaque minus quam et ullam illo nihil quod
amet, debitis magnam vitae sed. Quos delectus quam est reiciendis tempore,
non, magni magnam laudantium aliquam sequi quis blanditiis nobis quibusdam
repellendus quia deleniti tempora nesciunt expedita velit natus
perferendis iure ipsum quae! At ut fugiat debitis exercitationem ducimus
voluptatibus vero provident! Nesciunt, adipisci! Nisi minima laudantium
quisquam, nostrum temporibus harum laboriosam velit ea non ut architecto?
Culpa maxime quia possimus quibusdam accusamus impedit beatae quis nisi a
atque consequuntur deleniti, distinctio neque? Nulla consectetur quibusdam
quos odio accusantium rerum ut sapiente voluptatum aliquid tempora itaque
debitis exercitationem voluptates dolor quaerat, explicabo facere nostrum
obcaecati delectus neque. Nemo, aliquam corrupti optio in ea nulla vel,
ducimus, nobis hic veritatis temporibus? Excepturi laborum placeat
explicab
architecto rerum blanditiis harum. Fugit labore blanditiis quam, delectus
voluptas similique nulla doloremque maxime sit est eligendi pariatur
incidunt in sit sint culpa voluptate aut assumenda debitis autem deleniti?
Quia quam qui ipsam ic ab veniam itaque
fuga saepe similique eaque ullam tenetur distinctio, enim, alias quia amet
temporibus dicta, consequuntur mollitia.
</p>
<h2 id="s3">Section 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, animi
eos. Dolores porro dolore, nulla maiores reprehenderit neque, culpa, eaque
quos minus iusto ducimus autem ex consequatur. Minus, maxime atque
exercitationem excepturi, soluta facilis quidem doloribus, impedit earum
molestias molestiae voluptatem voluptatibus odio. Asperiores suscipit eos
non maiores. Atque aspernatur quidem omnis, aut aperiam id perferendis
incidunt cum! Veritatis, aut nostrum quisquam quae nobis unde? Sint quos
illo facilis ex ab! Officiis enim aut nihil laborum adipisci alias a qui,
debi
nissimos? Odio, possimus ullam! Unde enim debitis, vero voluptatum,
iusto, iste consequatur exercitationem natus sequi et doloribus. Repellat
tenetur hic autem excepturi iste eligendi laborum temporibus dolore,
quibusdam dicta asperiores itaque sed cumque eum dolor sunt? Molestias
quaerat aliquid, eligendi inventore, hic veniam maiores quasi, minima
quibusdam dolorum quidem facere. Consequuntur quidem repellat numquam
ratione nesciunt voluptatum, qui, sapiente placeat nihil, dolorem culpa
beatae alias neque. At quia, magnam itaque obcaecati amet aspernatur
maxime hic nihil omnis adipisci mollitia harum veritatis, voluptate totam
voluptas, quas perspiciatis fugit unde. Quaerat quos eius, amet ea quam
maiores consectetur perferendis ipsam animi aut, molestiae iure!
</p>