平滑滚动和偏移

我有我的网站的这个代码:

function clickMe() {
var element = document.getElementById('about');
element.scrollIntoView({
block: 'start',
behavior: 'smooth',
});
}

这工作相当不错，但我有一个固定的标题，所以当代码滚动到元素的标题是在方式。

有没有一种方法可以有一个偏移，使它滚动顺利？

102497 次浏览
小开
最佳答案

Is there a way to have an offset and make it scroll smoothly?

#Yes, but not with scrollIntoView()

The scrollIntoViewOptions of Element.scrollIntoView() do not allow you to use an offset. It is solely useful when you want to scroll to the exact position of the element.

You can however use Window.scrollTo() with options to both scroll to an offset position and to do so smoothly.

If you have a header with a height of 30px for example you might do the following:

function scrollToTargetAdjusted(){
var element = document.getElementById('targetElement');
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
  

window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
}

This will smoothly scroll to your element just so that it is not blocked from view by your header.

Note: You substract the offset because you want to stop before you scroll your header over your element.

#See it in action

You can compare both options in the snippet below.

<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 + window.pageYOffset - 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>

Edit

window.pageYOffset have being added, to fix the problem related to @coreyward comments

小开

Søren D. Ptæus's answer got me on the right track but I had issues with getBoundingClientRect() when not at the top of the window.

My solution adds a bit more to his to get getBoundingClientRect() working a bit more consistently with more versatility. I used the approach outlined here and implemented it to get this working as intended.

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'
});

Codepen Example

Remember to include the polyfill when implementing this!

小开

I tried the other solutions, but I was getting some strange behavior. However, this worked for me.

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
}

and the style:

html {
scroll-behavior: smooth;
}
小开

Simple but elegant solution if the element has a small height (shorter than the viewport):

element.scrollIntoView({ behavior: 'auto' /*or smooth*/, block: 'center' });

The block: center will scroll the element so the center of the element is at the vertical center of the viewport, so the top header will not cover it.

EDIT 8.5.22: behavior: instant was used in the past, but removed from browsers.

小开

I know this is a hack and definitely is something that you should use with caution, but you can actually add a padding and a negative margin to the element. I cannot guarantee that it would work for you as I don't have your markup and code, but I had a similar issue and used this workaround to solve it.

Say your header is 30px and you want an offset of 15px, then:

  #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
}
小开

Here is the function that I wrote based on the @ekfuhrmann's answer.
It takes the element that needs to be scrolled to as the first parameter and other options in the form of the object as the second parameter, similar to how the window.scrollTo() function works.

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);
}

The main difference is that it uses window.scrollBy() function instead of window.scrollTo(), so that we don't need to call .getBoundingClientRect() on body.

The options parameter can contain a headerHeight field - it can contain the height of the fixed element on the screen, that needs to be ignored when scrolling to the element.

This function can also have a block option, that for now can only accept a single "center" value. When set, the element which is scrolled to will appear in the center of the screen excluding the fixed element height. By default, the scroll will be applied to the element's top.

Usage example

Here we have two overlapping elements with fixed position. Let's imagine the largest of them is not visible on some viewport widths, so we need to dynamically get the available viewport height minus the height of fixed element.

The following example demonstrates, that the element will appear in the center of the available viewport height if the block option is set to "center", similar to how the Element.scrollIntoView() function works.

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>

小开

There is also scroll-margin and scroll-padding.

For me, scroll-padding is most useful for this kind of stuff.

/* 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;

Additionally, you can use smooth-scroll by setting scroll behaviour to smooth.

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;


/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: unset;

It's likely not Internet Explorer compatible, though.

小开

Søren D. Ptæus's answser is almost right, but it only works when the user is on top. This is because getBoundingClientRect will always get us the relative height and using window.scrollTo with a relative height doesn't work.

ekfuhrmann improved the answer by getting the total height from the body element and calculating the real height. However, I think it can be easier than that, we can simply use the relative position and use window.scrollBy.

Note: Key difference is window.scrollBy

const HEADER_HEIGHT = 45;


function scrollToTargetAdjusted(){
const element = document.getElementById('targetElement');
const elementPosition = element.getBoundingClientRect().top;
const offsetPosition = elementPosition - HEADER_HEIGHT;


window.scrollBy({
top: offsetPosition,
behavior: "smooth"
});
}
小开

With a very small hack you can make it work with scrollIntoView()

  • Let's say you want to scroll to a section and your elements are in this format:
<section id="about">
<p>About title</p>
<p>About description</p>
</section>


<section id="profile">
<p>About title</p>
<p>About description</p>
</section>
  • You convert the above code into this:
<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>
  • Then in your css you can easily change the offset by using:
.section-offset {
position: relative;
bottom: 60px; // <<< your offset here >>>
}

Conclusion:

Move the element selector to a span inside the section, then you can use position: relative on the span (top/bottom placement does not affect other elements on the page) to set the needed offset. If you need bottom offset, place the span element at the end of your section (ex: before the </section>).

小开 

      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>

小开

You can use scrollIntoView() like in your example

function clickMe() {
var element = document.getElementById('about');
element.scrollIntoView({
block: 'start',
behavior: 'smooth',
});
}

if you add scroll-margin with the height of the header to the target element (about):

.about {
scroll-margin: 100px;
}

Nothing else is needed. scroll-margin is supported by all modern browsers.

小开 
elementRef.current!.scrollIntoView({
behavior: 'smooth',
block: 'center'
})
小开

Come across this question and seems scrollBy provides the best flexibility. This is just a minimalistic version based on @yangli-io answer to save you some time and cleaner code.

function scrollIntoViewAdjusted(elem, offset=0){
window.scrollBy({
top: elem.getBoundingClientRect().top - offset,
behavior: "smooth"
});
}
小开

to prevent any element from intersecting with fixed top. there are actually many ways to do that. recently I use scroll-padding-top in CSS file.

* {
scroll-behavior: smooth;
scroll-padding-top: 100px; /* this pixel should match fixed header height */
}

what do you mean scroll smoothly? just add scroll-behavior: smooth; in CSS.

if what you want is to open a new page and then scroll smoothly, then that's a different approach. you can check my answer for this here

if what you looking for is to check if the element is in the viewport or not, then that's another story. I'm not sure which one you are looking for. if it's this one, please confirm and I will spend more time summarizing the answer for you. I had this issue and I finally solved it.


提交答案