Setting Scroll Position in React | HackerNoon

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

没有腹肌的苹果 · Setting Scroll ...· 4 小时前 ·

眼睛小的木耳 · scrollbar-width - ...· 4 小时前 ·

玩滑板的小虾米 · bitset· 昨天 ·

纯真的冲锋衣 · API: Statuses· 3 天前 ·

勤奋的毛衣 · v-scroll 指令 | Quasar ...· 1 周前 ·

豪情万千的花卷 · 从坟墓里扒出来的摄政王妃(我是你的浅浅)_第 ...· 5 天前 ·

乐观的沙滩裤 · 数据库中日期相减用什么函数 • ...· 3 周前 ·

威武的绿豆 · 28家龙膜全国臻选店查询地址+名称！-龙膜· 2 月前 ·

从未表白的苦咖啡 · 百年德國 alfi- 歐洲第一保溫名品· 3 月前 ·

爱听歌的红烧肉 · LG24241U ...· 3 月前 ·

</noscript><div id="__next" data-reactroot=""><div class="sc-9d336bae-0 bRkRGv"><header class="sc-eeb22f6c-0 eTNptX"><div class="mainNav" style="background:;background-image:"><div class="left-portion"><div class="search-container active"><div class="input-holder"><div class="ais-SearchBox"><form novalidate="" class="ais-SearchBox-form" action="" role="search"><input type="search" placeholder="Discover Anything" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required="" maxlength="512" value="" class="ais-SearchBox-input"/><button type="submit" title="Submit your search query." class="ais-SearchBox-submit"><svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewbox="0 0 40 40" aria-hidden="true"><path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"/></svg></button><button type="reset" title="Clear the search query." class="ais-SearchBox-reset" hidden=""><svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" width="10" height="10" aria-hidden="true"><path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"/></svg></button></form></div><img src="https://hackernoon.imgix.net/search-new.png?w=19&amp;h=19" class="search" alt="Search icon" width="19" height="19"/></div></div></div><a class="logo" href="/"><span class="desktop" style="background-color:;padding:5px;border-radius:5px"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27248%27%20height=%2740%27/%3e"/></span><img alt="Hackernoon logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Hackernoon logo" srcset="https://hackernoon.imgix.net/hn-logo.png?auto=format&amp;fit=max&amp;w=256 1x, https://hackernoon.imgix.net/hn-logo.png?auto=format&amp;fit=max&amp;w=640 2x" src="https://hackernoon.imgix.net/hn-logo.png?auto=format&amp;fit=max&amp;w=640" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></span><span class="mobile"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2737%27%20height=%2740%27/%3e"/></span><img alt="Hackernoon logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Hackernoon logo" srcset="https://hackernoon.imgix.net/hn-icon.png?auto=format&amp;fit=max&amp;w=48 1x, https://hackernoon.imgix.net/hn-icon.png?auto=format&amp;fit=max&amp;w=96 2x" src="https://hackernoon.imgix.net/hn-icon.png?auto=format&amp;fit=max&amp;w=96" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></span></a><div class="right-portion"><div style="width:fit-content" class="sc-eeb22f6c-1 cOdmIY"><a style="color:#003b00;border-color:#003b00;background-color:#88ff88;border-radius:5px" href="/reader-boot" class="sc-b3d23cc4-0 jECpNX">Read</a><a style="color:#003b00;border-color:#003b00;background-color:#88ff88;border-radius:5px;margin-right:2rem" href="https://app.hackernoon.com/new" class="sc-b3d23cc4-0 jECpNX">Write</a></div><div><img width="35" height="35" src="https://hackernoon.imgix.net/unread-bell.png?w=40" style="vertical-align:middle" alt="see notifications" class="sc-4d156c87-0 hslCzy"/><div class="sc-4d156c87-1 izlxCY"><div class="header">Notifications</div><div class="content"/><div style="display:flex"><div class="more">see  more</div></div></div></div><div class="sc-dd1bca92-0 jSiCMG"><div data-focus-guard="true" tabindex="-1" style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"/><div data-focus-lock-disabled="disabled"><button aria-label="Toggle menu" aria-expanded="false" aria-controls="main-menu" class="sc-14b24a79-0 ihbTZc"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 20" width="22" style="fill:"><path style="fill:" d="M21 9h1v2h-1v1H1v-1H0V9h1V8h20v1zM21 17h1v2h-1v1H1v-1H0v-2h1v-1h20v1zM22 1v2h-1v1H1V3H0V1h1V0h20v1h1z"/></svg></button><div aria-hidden="true" style="background-color:" class="sc-16ad823d-0 bfEqpI"><div class="mobile-header"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2730%27%20height=%2730%27/%3e"/></span><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="hackernoon-logo" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img srcset="https://hackernoon.imgix.net/hn-icon.png?auto=format&amp;fit=max&amp;w=96 1x, https://hackernoon.imgix.net/hn-icon.png?auto=format&amp;fit=max&amp;w=96 2x" src="https://hackernoon.imgix.net/hn-icon.png?auto=format&amp;fit=max&amp;w=96" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="hackernoon-logo" loading="lazy"/></noscript></span><div class="mobile-header-left"><a href="https://app.hackernoon.com/signup" class="mobile-auth">LOGIN / SIGNUP</a><img class="close-nav-img" src="https://hackernoon.imgix.net/icons/SVG/awesome/Window%20Close.svg"/></div></div><div class="sc-16ad823d-1 kcgCcU"/></div></div><div data-focus-guard="true" tabindex="-1" style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"/></div></div></div><div class="sc-72f8e89d-0 lkKurX subNav" style="border-top:;background-color:;color:"><ul style="background-color:" class="sc-b69cf9f6-0 kTjQvw"/></div><div><div style="background:;color:" class="sc-507e8eeb-0 iocYRY"><a class="logo" href="/"><img src="/hn-logo.png" alt="Hackernoon logo"/></a><a style="color:" class="daLink" target="_blank" rel="sponsored"><span style="color:;display:flex;align-items:center;background:;padding:0 10px;border-radius:5px"/></a><div class="colorPickerIcon"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2725%27%20height=%2725%27/%3e"/></span><img alt="paint-brush" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="paint-brush" srcset="https://hackernoon.imgix.net/brush2.png?w=25&amp;auto=format&amp;fit=max 1x, https://hackernoon.imgix.net/brush2.png?w=25&amp;auto=format&amp;fit=max 2x" src="https://hackernoon.imgix.net/brush2.png?w=25&amp;auto=format&amp;fit=max" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></div></div></div><div class="sc-9de06f04-0 byYhvg story-nav show"><div class="title"><span class="story-title">Setting Scroll Position in React</span><span class="by"> by</span><a class="profile" href="/u/iraklitch">@iraklitch</a><div class="profile-img"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2730%27%20height=%2730%27/%3e"/></span><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img srcset="https://cdn.hackernoon.com/avatars/robot-b4.png?auto=format&amp;fit=max&amp;w=32 1x, https://cdn.hackernoon.com/avatars/robot-b4.png?auto=format&amp;fit=max&amp;w=64 2x" src="https://cdn.hackernoon.com/avatars/robot-b4.png?auto=format&amp;fit=max&amp;w=64" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></div></div><div class="sharing"/></div></header><div style="position:fixed;z-index:9999;top:16px;left:16px;right:16px;bottom:16px;pointer-events:none"/><main class="sc-9d336bae-1 ghWRJY"><div class="sc-d7dc08c8-0 hOdHXf"><div class="sc-93e186d7-0 eROqxA"><div class="metaContainer desktop-no-show"><div class="sc-93e186d7-5 fEpdfH"><div class="sc-93e186d7-4 ehdhzV"><span class="story-stat"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 22" width="22" style="width:14px;fill:darkgray"><path style="width:14px;fill:darkgray" d="M22 7v2h-1v1h-1v1h-1v1h-1v1h-1v5h1v4h-2v-1h-2v-1h-2v-1h-2v1H8v1H6v1H4v-4h1v-5H4v-1H3v-1H2v-1H1V9H0V7h7V5h1V3h1V1h1V0h2v1h1v2h1v2h1v2h7z"/></svg> 68,701 reads</span></div></div></div><div class="story-topLine"><div class="story-stats"><span class="story-stat mobile-no-show"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 22" width="22" style="width:14px"><path style="width:14px" d="M22 7v2h-1v1h-1v1h-1v1h-1v1h-1v5h1v4h-2v-1h-2v-1h-2v-1h-2v1H8v1H6v1H4v-4h1v-5H4v-1H3v-1H2v-1H1V9H0V7h7V5h1V3h1V1h1V0h2v1h1v2h1v2h1v2h7z"/></svg> 68,701 reads</span></div><div class="story-admin"/></div><h1 class="story-title" style="text-align:center">Setting Scroll Position in React</h1><div class="title-bottom"><div class="title-bottom-left"><span class="header-handle " data-tip="true" data-for="story-author" aria-label="bookmark story" data-delay-hide="1000"><span> by </span><a> Irakli Tchigladze</a></span><span class="divider-bullet"/><span class="published-date">June 21st, 2023</span></div><div class="title-bottom-right"><div style="flex-shrink:0"><span style="display:flex;cursor:pointer" data-tip="true" data-for="terminal-view"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Read on Terminal Reader" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Read on Terminal Reader" srcset="https://hackernoon.imgix.net/computer.png?auto=format&amp;fit=max&amp;w=32 1x, https://hackernoon.imgix.net/computer.png?auto=format&amp;fit=max&amp;w=48 2x" src="https://hackernoon.imgix.net/computer.png?auto=format&amp;fit=max&amp;w=48" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></span></div><div style="flex-shrink:0"><span style="display:flex;cursor:pointer"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="Read this story w/o Javascript" data-tip="true" data-for="arweave-backup" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Read this story w/o Javascript" data-tip="true" data-for="arweave-backup" srcset="https://hackernoon.imgix.net/images/Lite%20Icon%20%4025px.png?auto=format&amp;fit=max&amp;w=32 1x, https://hackernoon.imgix.net/images/Lite%20Icon%20%4025px.png?auto=format&amp;fit=max&amp;w=48 2x" src="https://hackernoon.imgix.net/images/Lite%20Icon%20%4025px.png?auto=format&amp;fit=max&amp;w=48" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></span></div></div></div><div class="divider-line"/><div class="tldr-langs"><div class="sc-93e186d7-5 fEpdfH"><div class="sc-93e186d7-4 ehdhzV"><div class="sc-93e186d7-1 eiYCFa"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2750%27%20height=%2715%27/%3e"/></span><img alt="Open TLDR" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="tldr-logo" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Open TLDR" srcset="https://hackernoon.imgix.net/tl;dr-dark.png?auto=format&amp;fit=max&amp;w=64 1x, https://hackernoon.imgix.net/tl;dr-dark.png?auto=format&amp;fit=max&amp;w=128 2x" src="https://hackernoon.imgix.net/tl;dr-dark.png?auto=format&amp;fit=max&amp;w=128" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="tldr-logo" loading="lazy"/></noscript></span><img src="https://hackernoon.imgix.net/arrow-dark.png" alt="tldt arrow" width="12px" height="12px" class="tldr-arrow "/></div></div></div><div class="sc-93e186d7-3 bhpHZN"/></div><div class="tldr-no-show"><h2>Too Long; Didn't Read</h2>Learn how to use the **scrollTo()** method to set the scroll position to help users find what they’re looking for. You will also learn to scroll automatically or in response to click and submit events. The method takes one argument: an options object, which is a dictionary that specifies the scroll positions and animation type.</div></div><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%271400%27%20height=%27933%27/%3e"/></span><img alt="featured image - Setting Scroll Position in React" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="image-container feat" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="featured image - Setting Scroll Position in React" srcset="https://hackernoon.imgix.net/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-kla3rz9.jpeg?auto=format&amp;fit=max&amp;w=1920 1x, https://hackernoon.imgix.net/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-kla3rz9.jpeg?auto=format&amp;fit=max&amp;w=3840 2x" src="https://hackernoon.imgix.net/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-kla3rz9.jpeg?auto=format&amp;fit=max&amp;w=3840" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="image-container feat" loading="lazy"/></noscript></span><div style="grid-column:1 / -1"/><div class="sc-6d048d67-0 buhXYs profile"><div class="sc-6d048d67-1 cziptZ"><div class="profileImageContainer "><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;top:0;left:0;bottom:0;right:0"><img data-for="author-tooltip" data-tip="true" data-delay-hide="200" alt="Irakli Tchigladze HackerNoon profile picture" href="/u/iraklitch" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" class="profileImage " style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img data-for="author-tooltip" data-tip="true" data-delay-hide="200" alt="Irakli Tchigladze HackerNoon profile picture" href="/u/iraklitch" sizes="100vw" srcset="https://hackernoon.imgix.net/avatars/robot-b4.png?w=100&amp;auto=format&amp;fit=max 640w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=100&amp;auto=format&amp;fit=max 750w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=100&amp;auto=format&amp;fit=max 828w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=100&amp;auto=format&amp;fit=max 1080w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=100&amp;auto=format&amp;fit=max 1200w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=100&amp;auto=format&amp;fit=max 1920w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=100&amp;auto=format&amp;fit=max 2048w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=100&amp;auto=format&amp;fit=max 3840w" src="https://hackernoon.imgix.net/avatars/robot-b4.png?w=100&amp;auto=format&amp;fit=max" decoding="async" data-nimg="fill" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="profileImage " loading="lazy"/></noscript></span></div></div></div><div><div class="sc-2e79ac2f-0 ktrYOp"><div><p class="line-space"> <br/> </p><p>In this article, you’ll learn how to use the <strong>scrollTo()</strong> method to set the scroll position to help users find what they’re looking for. You will also learn to scroll automatically or in response to click and submit events.</p><h2><code>scrollTo()</code> <strong>method</strong></h2> <p><code>scrollTo()</code> is one of many useful methods available on the <code>window</code> interface. It allows you to scroll down (or across) by a specified number of pixels. For example, scroll 1000 pixels down.</p> <p class="line-space"> <br/> </p><p>The method takes one argument: an options object, which is a dictionary that specifies the scroll position and its animation type.</p><p class="line-space"> <br/> </p><p><strong>The object can have three properties:</strong></p><p class="line-space"> <br/> </p><ol> <li><code>top</code> – specifies the number of pixels to scroll down.</li> <li><code>left</code> – specifies the number of pixels to scroll across.</li> <li><code>behavior</code> – specifies the scrolling animation.</li> <p class="line-space"> <br/> </p><p>An absolute majority of modern web applications are scrollable only vertically. For this reason, in practice, you will only use <code>top</code> and <code>behavior</code> properties.</p><p class="line-space"> <br/> </p><h3><strong>Practical use cases</strong></h3> <p>You can use <code>scrollTo()</code> method to scroll down in response to <strong>click</strong>, <strong>submit</strong>, and other events.</p> <p class="line-space"> <br/> </p><p>It’s also possible to use <code>scrollTo()</code> in lifecycle methods (and <strong><a href="https://hackernoon.com/how-to-use-react-to-replace-useeffect?ref=hackernoon.com" target="_blank" rel="noopener noreferrer ugc">useEffect()</a></strong> hook) to automatically set scroll position when the component mounts or re-renders.</p><p class="line-space"> <br/> </p><p class="line-space"> <br/> </p><h2><strong>Set scroll position to specific coordinates</strong></h2> <p>Let’s look at a code example where clicking a button sets the scroll position to a specific section of the page:</p> <p class="line-space"> <br/> </p><pre><code class="language-javascript">&lt;div className="App"&gt; &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt; &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt; &lt;button onClick={() =&gt; window.scrollTo({ top: 1000, behavior: "smooth" })} Learn more &lt;/button&gt; &lt;div style={{ height: 1000 }}&gt;&lt;/div&gt; Lorem ipsum… &lt;div style={{ height: 1000 }}&gt;&lt;/div&gt; <p class="line-space"> <br/> </p><div class="codesandbox-container"><iframe src="https://codesandbox.io/embed/great-albattani-9t2iu1" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"/></div> shows a page with two heading elements, a button, and two <strong>&lt;div&gt;</strong> elements that add 1000 pixels of white space.<p class="line-space"> <br/> </p><p>Clicking the button scrolls 1000 pixels down, so the viewport shows the paragraph text.</p><p class="line-space"> <br/> </p><p class="line-space"> <br/> </p><p><span><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27600%27%20height=%27338%27/%3e"/></span><img alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="image-container undefined" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="" srcset="https://hackernoon.imgix.net/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-yt93r3r.gif.webp?auto=format&amp;fit=max&amp;w=640 1x, https://hackernoon.imgix.net/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-yt93r3r.gif.webp?auto=format&amp;fit=max&amp;w=1200 2x" src="https://hackernoon.imgix.net/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-yt93r3r.gif.webp?auto=format&amp;fit=max&amp;w=1200" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="image-container undefined" loading="lazy"/></noscript></span></span></p><p class="line-space"> <br/> </p><p class="line-space"> <br/> </p><p>Alternatively, you can use lifecycle methods (or the <strong><a href="https://hackernoon.com/a-detailed-guide-to-the-useeffect-hook-in-react?ref=hackernoon.com" target="_blank" rel="noopener noreferrer ugc">useEffect()</a></strong> hook) to set the scroll position when the component mounts or every time it renders.</p><p class="line-space"> <br/> </p><pre><code class="language-javascript">export default function App() { useEffect(() =&gt; window.scrollTo({ top: 1000, behavior: "smooth" }), []); return ( &lt;div className="App"&gt; &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt; &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt; Learn more &lt;/button&gt; &lt;div style={{ height: 1000 }}&gt;&lt;/div&gt; Lorem ipsum… &lt;div style={{ height: 1000 }}&gt;&lt;/div&gt; <p class="line-space"> <br/> </p><p>The dependency array determines the frequency at which the method is called. Read <a href="https://blog.bitsrc.io/understanding-dependencies-in-useeffect-7afd4df37c96?gi=35bdcfe36527&amp;ref=hackernoon.com" target="_blank" rel="noopener noreferrer ugc">this guide</a> to learn more about it.</p><p class="line-space"> <br/> </p><h2><strong>Two ways to set scroll position to a certain element in React</strong></h2> <p>On some occasions, you might need to scroll a certain element into view. To start, you need some way to reference that element in React.</p> <p class="line-space"> <br/> </p><h3><strong>Access DOM elements in React</strong></h3> <p>In plain JavaScript, you might use <strong>getElementById()</strong> to access DOM elements. Things work differently in React. You need to create a <em>ref</em> to store a reference to the DOM element.</p> <p class="line-space"> <br/> </p><h3><strong>Using the scrollTo() method</strong></h3> <p>To scroll the element into view, set <strong>top</strong> property to the number of pixels between the element and the top of the page. The value is stored in <code>ref.current.offsetTop</code> property.</p> <p class="line-space"> <br/> </p><pre><code class="language-javascript">function App() { const paragraphRef = useRef(null); return ( &lt;div className="App"&gt; &lt;button onClick={() =&gt; window.scrollTo({ top: paragraphRef.current.offsetTop, behavior: "smooth" Learn more &lt;/button&gt; &lt;p ref={paragraphRef}&gt; Lorem Ipsum… <p class="line-space"> <br/> </p><p class="line-space"> <br/> </p><h3>Using the scrollIntoView() method</h3> <p>You can also use the <strong>scrollIntoView()</strong> method to scroll to an element in React.</p> <p class="line-space"> <br/> </p><p>There’s an important difference between the two methods. You need to call the <strong>scrollIntoView()</strong> method on the element itself.</p><p class="line-space"> <br/> </p><p>Let’s look at an example:</p><p class="line-space"> <br/> </p><pre><code class="language-javascript">function App() { const paragraphRef = useRef(null); return ( &lt;button onClick={() =&gt; paragraphRef.current.scrollIntoView({ behavior: "smooth", block: "start" Scroll to element &lt;/button&gt; &lt;p ref={paragraphRef}&gt; Lorem ipsum… <p class="line-space"> <br/> </p><p>This is arguably a more readable way to scroll to an element in React. You can also use this method to <a href="https://simplefrontend.com/react-scroll-to-bottom/?ref=hackernoon.com" target="_blank" rel="noopener noreferrer ugc">scroll to bottom in React</a>.</p><h2>Conclusion</h2> <p>Hopefully, learning about <code>scrollTo()</code> method and its many use cases can help you improve the user experience of your app. In this article, we also explored different ways to set a scroll position to a specific element in React.</p> <p class="line-space"> <br/> </p></div><div style="" class="sc-2e79ac2f-8 cdKvIK"><button><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 22" width="22" style="width:18px;fill:white"><path style="width:18px;fill:white" d="M16 9h1v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H9v1H8v1H7v1H6v1H0v-6h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V9h1V8h1V7h1V6h1V5h2v1h1v1h1v1h1v1zM22 4v2h-1v1h-1v1h-1v1h-1V8h-1V7h-1V6h-1V5h-1V4h-1V3h1V2h1V1h1V0h2v1h1v1h1v1h1v1h1z"/></svg></button><button><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 22" width="22" style="width:18px;fill:white"><path style="width:18px;fill:white" d="M20 3v2h-1v2h-1v1h-5V7h-2v1h-1v1H9v4h1v1h1v1h2v-1h5v1h1v2h1v2h-1v2h-1v1h-5v-1h-1v-2h-1v-2h-1v-1H9v-1H8v-1H7v1H2v-1H1v-2H0v-2h1V8h1V7h5v1h1V7h1V6h1V5h1V3h1V1h1V0h5v1h1v2h1z"/></svg></button><button><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 22" width="22" style="width:18px;fill:white"><path style="width:18px;fill:white" d="M14 19v2h-1v1H1v-1H0V5h1V4h3v15h10z"/><path style="width:18px;fill:white" d="M20 6v11h-1v1H6v-1H5V1h1V0h8v6h6z"/><path style="width:18px;fill:white" d="M20 4v1h-5V0h1v1h1v1h1v1h1v1h1z"/></svg></button><a style="margin-left:15px;color:white" href="#commentSection"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 19" width="22" style="width:18px;fill:white"><path style="width:18px;fill:white" d="M21 6V4h-1V3h-1V2h-2V1h-3V0H8v1H5v1H3v1H2v1H1v2H0v6h1v2h1v2H1v1H0v2h5v-1h1v-1h2v1h6v-1h3v-1h2v-1h1v-1h1v-2h1V6h-1ZM6 13h1v-1h1v-2H6V5h4v8H9v1H6v-1Zm6 0h1v-1h1v-2h-2V5h4v8h-1v1h-3v-1Z"/></svg></a><button style="margin-right:10px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" width="22" style="width:18px;fill:white"><path style="width:18px;fill:white" d="M20 2v12h-1v1h-2v1h-6v-1H4v1H3v4H1V3H0V1h1V0h2v1h1v2H3v1h1V3h7v1h6V3h2V2h1z"/></svg></button><div class="sc-2e79ac2f-9 kIDgmw"/></div></div></div><span style="width:1px;height:1px"/></div><div class="sc-738aab49-0 gYRgFU"><div class="dabytag"><div class="sc-a0a54eeb-0 ensLvG"><a href="https://ad.doubleclick.net/ddm/trackclk/N1700473.5487816HACKERNOON/B32575813.405683729;dc_trk_aid=597649435;dc_trk_cid=223410562;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};ltd=;dc_tdv=1" target="_blank"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;top:0;left:0;bottom:0;right:0"><img alt="Miro-Prog" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Miro-Prog" sizes="100vw" srcset="https://hackernoon.imgix.net/images/img-ql53l5p.png?auto=format&amp;fit=max&amp;w=640 640w, https://hackernoon.imgix.net/images/img-ql53l5p.png?auto=format&amp;fit=max&amp;w=750 750w, https://hackernoon.imgix.net/images/img-ql53l5p.png?auto=format&amp;fit=max&amp;w=828 828w, https://hackernoon.imgix.net/images/img-ql53l5p.png?auto=format&amp;fit=max&amp;w=1080 1080w, https://hackernoon.imgix.net/images/img-ql53l5p.png?auto=format&amp;fit=max&amp;w=1200 1200w, https://hackernoon.imgix.net/images/img-ql53l5p.png?auto=format&amp;fit=max&amp;w=1920 1920w, https://hackernoon.imgix.net/images/img-ql53l5p.png?auto=format&amp;fit=max&amp;w=2048 2048w, https://hackernoon.imgix.net/images/img-ql53l5p.png?auto=format&amp;fit=max&amp;w=3840 3840w" src="https://hackernoon.imgix.net/images/img-ql53l5p.png?auto=format&amp;fit=max&amp;w=3840" decoding="async" data-nimg="fill" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span> </a></div></div><div style="display:flex;align-items:flex-end;justify-content:center"><div>L O A D I N G<br/>. . . comments &amp; <span style="font-style:italic"> more!</span><br/></div></div><br/><section><div class="sc-104e382f-0 dGrQDi authorBio-section"><h3>About Author</h3><div class="row"><div class="avatar "><a href="/u/iraklitch"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;top:0;left:0;bottom:0;right:0"><img alt="Irakli Tchigladze HackerNoon profile picture" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="Irakli Tchigladze HackerNoon profile picture" sizes="100vw" srcset="https://hackernoon.imgix.net/avatars/robot-b4.png?w=200&amp;auto=format&amp;fit=max 640w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=200&amp;auto=format&amp;fit=max 750w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=200&amp;auto=format&amp;fit=max 828w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=200&amp;auto=format&amp;fit=max 1080w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=200&amp;auto=format&amp;fit=max 1200w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=200&amp;auto=format&amp;fit=max 1920w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=200&amp;auto=format&amp;fit=max 2048w, https://hackernoon.imgix.net/avatars/robot-b4.png?w=200&amp;auto=format&amp;fit=max 3840w" src="https://hackernoon.imgix.net/avatars/robot-b4.png?w=200&amp;auto=format&amp;fit=max" decoding="async" data-nimg="fill" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" loading="lazy"/></noscript></span></a></div><div class="author-info"><div class="author-info-top"><span class="author-name-handle"><strong>Irakli Tchigladze</strong><span class="handle"><a href="/u/iraklitch">@iraklitch</a></span></span><div class="sc-9d94a5e5-4 jtwMgp"><form class="author-email-form"><div class="emailContainer"><input type="email" placeholder="name@company.com" name="email" required="" value=""/><button class="sc-9d94a5e5-2 fEEqoW plus-icon subscribe-tooltip sub-btn"><div><span data-tip="true" data-for="subscribe-btn-tooltip">Subscribe <i class=""/></span></div></button></div></form></div></div><span class="bio">Former front-end developer, and current writer who loves to help people understand difficult technical concepts.</span><div class="author-cta-wrapper"><a class="bio-cta" href="/u/iraklitch"><i style="font-size:1.8rem"/>Read my stories</a><a class="bio-cta" href="/about/iraklitch"><i style="font-size:1.8rem"/>About @iraklitch</a></div></div></div></div></section><div id="commentSection"/><section class="topics-section"><h4>TOPICS</h4><div class="tags"><a class="sc-29806bfb-0 cdoWeI parent-category" href="/c/programming"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e"/></span><img alt="purcat-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="purcat-img" srcset="https://cdn.hackernoon.com/icons/SVG/Programming.svg?auto=format&amp;fit=max&amp;w=32 1x, https://cdn.hackernoon.com/icons/SVG/Programming.svg?auto=format&amp;fit=max&amp;w=48 2x" src="https://cdn.hackernoon.com/icons/SVG/Programming.svg?auto=format&amp;fit=max&amp;w=48" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span><span style="text-transform:uppercase;color:white;margin-left:1rem">programming</span></a><a class="sc-bc42364f-0 ghXAMP" href="/tagged/react"> #react</a><a class="sc-bc42364f-0 ghXAMP" href="/tagged/web-development"> #web-development</a><a class="sc-bc42364f-0 ghXAMP" href="/tagged/reactjs"> #reactjs</a><a class="sc-bc42364f-0 ghXAMP" href="/tagged/ux"> #ux</a><a class="sc-bc42364f-0 ghXAMP" href="/tagged/ui-design"> #ui-design</a><a class="sc-bc42364f-0 ghXAMP" href="/tagged/javascript"> #javascript</a><a class="sc-bc42364f-0 ghXAMP" href="/tagged/web-app-development"> #web-app-development</a><a class="sc-bc42364f-0 ghXAMP" href="/tagged/user-interface"> #user-interface</a></div></section><div class="sc-fee3e5e9-0 jvdbKp"><h4>THIS ARTICLE WAS FEATURED IN...</h4><div class="web-tags"><a href="https://www.arweave.net/F98B5iVyNBERuF8U8oydO06DSlviXti3T6WjO0TMDr4" target="_blank" rel="nofollow" class="sc-fee3e5e9-2 yKmBk"><div style="width:fit-content" class="sc-fee3e5e9-1 dzAAXf"><div style="display:flex;align-items:center;justify-self:center"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2724%27%20height=%2724%27/%3e"/></span><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="filter:invert(0%);top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img srcset="https://hackernoon.imgix.net/images/arweave.png?auto=format&amp;fit=max&amp;w=32 1x, https://hackernoon.imgix.net/images/arweave.png?auto=format&amp;fit=max&amp;w=48 2x" src="https://hackernoon.imgix.net/images/arweave.png?auto=format&amp;fit=max&amp;w=48" decoding="async" data-nimg="intrinsic" style="filter:invert(0%);top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span><div style="margin-left:5px">Permanent on Arweave</div></div></div></a><a href="https://terminal.hackernoon.com/setting-scroll-position-in-react?ref=hackernoon" target="_blank" rel="nofollow" class="sc-fee3e5e9-2 yKmBk"><div class="sc-fee3e5e9-1 dzAAXf"><span style="display:flex;cursor:pointer" data-tip="true" data-for="terminal-view"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2722%27%20height=%2722%27/%3e"/></span><img alt="Read on Terminal Reader" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Read on Terminal Reader" srcset="https://hackernoon.imgix.net/computer.png?auto=format&amp;fit=max&amp;w=32 1x, https://hackernoon.imgix.net/computer.png?auto=format&amp;fit=max&amp;w=48 2x" src="https://hackernoon.imgix.net/computer.png?auto=format&amp;fit=max&amp;w=48" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></span> Terminal</div></a><a href="/lite/setting-scroll-position-in-react?ref=hackernoon" target="_blank" rel="nofollow" class="sc-fee3e5e9-2 yKmBk"><div class="sc-fee3e5e9-1 dzAAXf"><span style="display:flex;cursor:pointer"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2722%27%20height=%2722%27/%3e"/></span><img alt="Read this story w/o Javascript" data-tip="true" data-for="lite-tooltip" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Read this story w/o Javascript" data-tip="true" data-for="lite-tooltip" srcset="https://hackernoon.imgix.net/images/Lite%20Icon%20%4025px.png?auto=format&amp;fit=max&amp;w=32 1x, https://hackernoon.imgix.net/images/Lite%20Icon%20%4025px.png?auto=format&amp;fit=max&amp;w=48 2x" src="https://hackernoon.imgix.net/images/Lite%20Icon%20%4025px.png?auto=format&amp;fit=max&amp;w=48" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></span> Lite</div></a><a href="https://raviswdev.blogspot.com/2024/03/react-tutorial-blog-app-reactrouterv6.html" target="_blank" rel="nofollow" style="z-index:1" class="sc-fee3e5e9-2 yKmBk"><div class="sc-fee3e5e9-1 dzAAXf"><img src="https://t0.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=https://raviswdev.blogspot.com/2024/03/react-tutorial-blog-app-reactrouterv6.html&amp;size=16" width="16px" height="16px" style="margin-right:5px"/><span>Blogspot</span></div></a><a href="http://itf-generalchoi.com/the-techniques-to-finding-world-class-equipment-for-your-web-developer-overview-quickly/" target="_blank" rel="nofollow" style="z-index:1" class="sc-fee3e5e9-2 yKmBk"><div class="sc-fee3e5e9-1 dzAAXf"><img src="https://t0.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=http://itf-generalchoi.com/the-techniques-to-finding-world-class-equipment-for-your-web-developer-overview-quickly/&amp;size=16" width="16px" height="16px" style="margin-right:5px"/><span>Itf-generalchoi</span></div></a><a href="http://deharohorns.com/2023/07/" target="_blank" rel="nofollow" style="z-index:1" class="sc-fee3e5e9-2 yKmBk"><div class="sc-fee3e5e9-1 dzAAXf"><img src="https://t0.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=http://deharohorns.com/2023/07/&amp;size=16" width="16px" height="16px" style="margin-right:5px"/><span>Deharohorns</span></div></a><a href="http://awearning.info/the-secrets-to-looking-for-top-quality-devices-for-your-web-designer-quick-guide-swiftly/" target="_blank" rel="nofollow" style="z-index:1" class="sc-fee3e5e9-2 yKmBk"><div class="sc-fee3e5e9-1 dzAAXf"><img src="https://t0.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=http://awearning.info/the-secrets-to-looking-for-top-quality-devices-for-your-web-designer-quick-guide-swiftly/&amp;size=16" width="16px" height="16px" style="margin-right:5px"/><span>Awearning</span></div></a></div></div><section class="related-section"><h4>RELATED STORIES</h4><div class="articles-wrapper"><div><div><div class="sc-65adb81b-0 evreGv"><div class="img"><a href="https://ad.doubleclick.net/ddm/trackclk/N1700473.5487816HACKERNOON/B32575813.405683729;dc_trk_aid=597649435;dc_trk_cid=223410562;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};ltd=;dc_tdv=1" style="display:contents" target="_blank" rel="noopener noreferrer"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27260%27%20height=%27150%27/%3e"/></span><img alt="Article Thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="img" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Article Thumbnail" srcset="https://hackernoon.imgix.net/images/img-5h13mf0.jpeg?auto=format&amp;fit=max&amp;w=500 1x, https://hackernoon.imgix.net/images/img-5h13mf0.jpeg?auto=format&amp;fit=max&amp;w=500 2x" src="https://hackernoon.imgix.net/images/img-5h13mf0.jpeg?auto=format&amp;fit=max&amp;w=500" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="img" loading="lazy"/></noscript></span></a></div><div class="text"><strong><a href="https://ad.doubleclick.net/ddm/trackclk/N1700473.5487816HACKERNOON/B32575813.405683729;dc_trk_aid=597649435;dc_trk_cid=223410562;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};ltd=;dc_tdv=1" style="text-decoration:none;text-align:left" target="_blank" rel="noopener noreferrer">Welcome to Miro - The Innovation Workspace!</a></strong><div class="card-title"><div class="card-info"><span class="author"><span style="color:gray">visit</span> <strong><a class="author-link" target="_blank" rel="noopener noreferrer" href="https://ad.doubleclick.net/ddm/trackclk/N1700473.5487816HACKERNOON/B32575813.405683729;dc_trk_aid=597649435;dc_trk_cid=223410562;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};ltd=;dc_tdv=1"> Miro-Prog </a></strong></span><div/></div><a class="related ad-tag" target="_blank" rel="noopener noreferrer" href="https://ad.doubleclick.net/ddm/trackclk/N1700473.5487816HACKERNOON/B32575813.405683729;dc_trk_aid=597649435;dc_trk_cid=223410562;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};ltd=;dc_tdv=1"><span class="centered "> #Sponsored</span></a></div></div></div></div></div><div class="sc-65adb81b-0 evreGv"><div class="img"><a href="../a-quick-guide-to-the-render-method-in-react" style="display:contents" target="_blank" rel="noopener noreferrer"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27260%27%20height=%27150%27/%3e"/></span><img alt="Article Thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="img" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Article Thumbnail" srcset="https://hackernoon.imgix.net/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-vv83lv8.jpeg?auto=format&amp;fit=max&amp;w=260 1x, https://hackernoon.imgix.net/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-vv83lv8.jpeg?auto=format&amp;fit=max&amp;w=260 2x" src="https://hackernoon.imgix.net/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-vv83lv8.jpeg?auto=format&amp;fit=max&amp;w=260" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="img" loading="lazy"/></noscript></span></a></div><div class="text"><strong><a href="../a-quick-guide-to-the-render-method-in-react" style="text-decoration:none;text-align:left" target="_blank" rel="noopener noreferrer">A Quick Guide To The render() Method in React</a></strong><div class="card-title"><div class="card-info"><span class="author"><span style="color:gray">by</span> <strong><a class="author-link" href="https://hackernoon.com/u/iraklitch">iraklitch </a></strong></span><div/><div class="divider-bullet"/><div class="date">Jan 03, 2024</div></div><a class="related" href="/tagged/react"><span class="centered"> #react</span></a></div></div></div><div class="sc-65adb81b-0 evreGv"><div class="img"><a href="../its-hard-to-create-a-pwa-with-nextjs-but-why" style="display:contents" target="_blank" rel="noopener noreferrer"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27260%27%20height=%27150%27/%3e"/></span><img alt="Article Thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="img" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Article Thumbnail" srcset="https://hackernoon.imgix.net/images/wNuie4SqwWXAyHIBWtUTi45M94E2-m993sbk.jpeg?auto=format&amp;fit=max&amp;w=260 1x, https://hackernoon.imgix.net/images/wNuie4SqwWXAyHIBWtUTi45M94E2-m993sbk.jpeg?auto=format&amp;fit=max&amp;w=260 2x" src="https://hackernoon.imgix.net/images/wNuie4SqwWXAyHIBWtUTi45M94E2-m993sbk.jpeg?auto=format&amp;fit=max&amp;w=260" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="img" loading="lazy"/></noscript></span></a></div><div class="text"><strong><a href="../its-hard-to-create-a-pwa-with-nextjs-but-why" style="text-decoration:none;text-align:left" target="_blank" rel="noopener noreferrer">It's Hard to Create a PWA With Next.js: But Why?</a></strong><div class="card-title"><div class="card-info"><span class="author"><span style="color:gray">by</span> <strong><a class="author-link" href="https://hackernoon.com/u/imamdev">imamdev </a></strong></span><div/><div class="divider-bullet"/><div class="date">May 02, 2023</div></div><a class="related" href="/tagged/javascript"><span class="centered"> #javascript</span></a></div></div></div><div class="sc-65adb81b-0 evreGv"><div class="img"><a href="../autocomplete-search-component-with-react-and-typescript" style="display:contents" target="_blank" rel="noopener noreferrer"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27260%27%20height=%27150%27/%3e"/></span><img alt="Article Thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="img" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Article Thumbnail" srcset="https://hackernoon.imgix.net/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-0c93uls.jpeg?auto=format&amp;fit=max&amp;w=260 1x, https://hackernoon.imgix.net/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-0c93uls.jpeg?auto=format&amp;fit=max&amp;w=260 2x" src="https://hackernoon.imgix.net/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-0c93uls.jpeg?auto=format&amp;fit=max&amp;w=260" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="img" loading="lazy"/></noscript></span></a></div><div class="text"><strong><a href="../autocomplete-search-component-with-react-and-typescript" style="text-decoration:none;text-align:left" target="_blank" rel="noopener noreferrer">Autocomplete Search Component With React and TypeScript</a></strong><div class="card-title"><div class="card-info"><span class="author"><span style="color:gray">by</span> <strong><a class="author-link" href="https://hackernoon.com/u/ljaviertovar">ljaviertovar </a></strong></span><div/><div class="divider-bullet"/><div class="date">Nov 28, 2022</div></div><a class="related" href="/tagged/reactjs"><span class="centered"> #reactjs</span></a></div></div></div><div class="sc-65adb81b-0 evreGv"><div class="img"><a href="../hacking-hacker-noon-tips-to-avoid-getting-your-stories-rejected-by-our-editors-t7t35lt" style="display:contents" target="_blank" rel="noopener noreferrer"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27260%27%20height=%27150%27/%3e"/></span><img alt="Article Thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="img" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Article Thumbnail" srcset="https://hackernoon.imgix.net/images/InxBRjRIs6M1kdhuWcyNHiiUrxm1-ow9354n.jpeg?auto=format&amp;fit=max&amp;w=260 1x, https://hackernoon.imgix.net/images/InxBRjRIs6M1kdhuWcyNHiiUrxm1-ow9354n.jpeg?auto=format&amp;fit=max&amp;w=260 2x" src="https://hackernoon.imgix.net/images/InxBRjRIs6M1kdhuWcyNHiiUrxm1-ow9354n.jpeg?auto=format&amp;fit=max&amp;w=260" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="img" loading="lazy"/></noscript></span></a></div><div class="text"><strong><a href="../hacking-hacker-noon-tips-to-avoid-getting-your-stories-rejected-by-our-editors-t7t35lt" style="text-decoration:none;text-align:left" target="_blank" rel="noopener noreferrer">Hacking Hacker Noon : Tips to Avoid Getting Your Stories Rejected by Our Editors</a></strong><div class="card-title"><div class="card-info"><span class="author"><span style="color:gray">by</span> <strong><a class="author-link" href="https://hackernoon.com/u/support">support </a></strong></span><div/><div class="divider-bullet"/><div class="date">Jul 16, 2021</div></div><a class="related" href="/tagged/how-to-avoid-getting-rejected"><span class="centered"> #how-to-avoid-getting-rejected</span></a></div></div></div><div class="sc-65adb81b-0 evreGv"><div class="img"><a href="../1-11-2023-noonification" style="display:contents" target="_blank" rel="noopener noreferrer"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27260%27%20height=%27150%27/%3e"/></span><img alt="Article Thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="img" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Article Thumbnail" srcset="https://hackernoon.imgix.net/images/zduv342l.gif?auto=format&amp;fit=max&amp;w=260 1x, https://hackernoon.imgix.net/images/zduv342l.gif?auto=format&amp;fit=max&amp;w=260 2x" src="https://hackernoon.imgix.net/images/zduv342l.gif?auto=format&amp;fit=max&amp;w=260" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="img" loading="lazy"/></noscript></span></a></div><div class="text"><strong><a href="../1-11-2023-noonification" style="text-decoration:none;text-align:left" target="_blank" rel="noopener noreferrer">The Noonification: Reduce Javascript: Master the Basics (1/11/2023)</a></strong><div class="card-title"><div class="card-info"><span class="author"><span style="color:gray">by</span> <strong><a class="author-link" href="https://hackernoon.com/u/noonification">noonification </a></strong></span><div/><div class="divider-bullet"/><div class="date">Jan 11, 2023</div></div><a class="related" href="/tagged/noonification"><span class="centered"> #noonification</span></a></div></div></div></div></section><div class="sc-92a1b621-1 SWeJa"><a class="fs-hn-cta" href="https://hackernoon.com/login"><div class="cta-top"><small>Join HackerNoon</small><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2770%27%20height=%2770%27/%3e"/></span><img alt="loading" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="loading" srcset="https://hackernoon.com/watch-gif.gif?auto=format&amp;fit=max&amp;w=96 1x, https://hackernoon.com/watch-gif.gif?auto=format&amp;fit=max&amp;w=256 2x" src="https://hackernoon.com/watch-gif.gif?auto=format&amp;fit=max&amp;w=256" decoding="async" data-nimg="intrinsic" style="top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></div><strong>Latest technology trends. Customized Experience. Curated Stories. Publish Your Ideas </strong></a></div></div></main></div></div><div>