<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>var b=document.documentElement.classList;b.remove('no-js');if(!window.Promise||!window.sessionStorage||!!sessionStorage.getItem('muller.v2')){b.add('muller')}</script><link rel="dns-prefetch" href="https://assets.htmlacademy.org"><script async src="https://www.googletagmanager.com/gtag/js?id=G-MXPCRXM48C"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MXPCRXM48C');
</script><script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
amplitude.getInstance().init("df11525b6880a3c5e2af14f9b6238408", null,{
includeUtm: true,
includeGclid: true,
includeReferrer: true,
deviceIdFromUrlParam: true
}, function (instance) {
window.amplitudeLoaded = true;
});
</script><link rel="stylesheet" href="https://assets.htmlacademy.org/css/core.v284.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/profile.v236.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course.v246.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-light.v20.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-en.v2.css"><script src="https://assets.htmlacademy.org/js/sentry.js" data-sentry="3774884cc81746ed84c0ba7c5cd4ac7b" data-project="26" data-version="2"></script><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/cookies.css"><link rel="preload" as="script" href="https://assets.htmlacademy.org/js/general.v274.js"><title>Scroll page on click — Scrolling and operators — HTML Academy</title><meta name="csrf-token" content="41964caf322823086fca37a7326b9bd2a54"><meta property="og:type" content="website"><meta property="og:site_name" content="HTML Academy"><meta name="twitter:url" property="og:url" content="https://htmlacademy.org"><meta name="twitter:title" property="og:title" content="Interactive online courses HTML Academy"><meta name="twitter:description" property="og:description" content="Together we’ll learn how to work with real code, solve true-to-life problems, use cutting edge technologies. Minimum of boring theory and lots of practical tasks."><meta name="twitter:image" property="og:image" content="https://htmlacademy.org/og/htmlacademy.png"><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://htmlacademy.org/courses/javascript-basics/scrolling-and-operators/scroll-page-onclick"><meta name="theme-color" content="#2f358f"></head><body class="course-interface course-interface--light" data-base="/assets/courses/24/"><header class="page-header page-header--course"><div class="page-header__inner"><div class="page-header__top"><a class="page-header__logo" href="/" aria-label="HTML Academy Home"><img src="https://assets.htmlacademy.org/img/logo--small.svg?cs=1218aec0be4a5f23db79ad29a14e30f7f9fb9a25" width="24" height="36" alt="HTML Academy"></a><nav class="main-nav main-nav--mini" role="navigation"><div class="main-nav__course-nav"><a class="main-nav__course-item main-nav__course-button main-nav__course-button--prev" href="/courses/javascript-basics/scrolling-and-operators/scrollto-method">The scrollTo method</a><div class="main-nav__course-item main-nav__course-list main-nav__course-list--collapsed"><b class="main-nav__course-title">Scrolling and operators</b><span class="main-nav__course-stat">5/15</span><div class="main-nav__course-contents"><a class="main-nav__course-contents-link" href="/courses/javascript-basics/scrolling-and-operators">Back to the list of tasks</a><ul class="main-nav__course-contents-list"><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/onscroll-event-handler">1. The onscroll event handler</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/pageyoffset-property">2. The pageYOffset property</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/show-button">3. Show the “Up” button</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/scrollto-method">4. The scrollTo method</a></li><li class="main-nav__course-contents-item main-nav__course-contents-item--current"><a href="/courses/javascript-basics/scrolling-and-operators/scroll-page-onclick">5. Scroll page on click</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/finish-button">6. Finish working on the “Up” button</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/start-filtering">7. Start filtering on the site</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/strict-equality-operator">8. Strict equality operator</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/onchange-event-handler">9. The onchange event handler</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/add-class">10. Add a class to news story from the selected category</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/strict-inequality-operator">11. Strict inequality operator</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/showing-news">12. Showing news from a selected category</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/logical-operator-and">13. The logical operator AND</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/summary">14. Summary of “Scrolling and operators”</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-basics/scrolling-and-operators/rate-site">15. Test: Rate the site</a></li></ul></div></div><a class="main-nav__course-item main-nav__course-button main-nav__course-button--next" href="/courses/javascript-basics/scrolling-and-operators/finish-button">Finish working on the “Up” button</a></div><ul class="main-nav__list main-nav__list--user main-nav__list--user-guest"><li class="main-nav__item" itemprop="name"><a class="main-nav__link" href="/signup?redirect_url=%2Fcourses%2Fjavascript-basics%2Fscrolling-and-operators%2Fscroll-page-onclick" title="Sign up" data-modal="open" data-value="register" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#user"></use></svg></span>Sign up</a></li><li class="main-nav__item main-nav__item--login" itemprop="name"><a class="main-nav__link" href="/login?redirect_url=%2Fcourses%2Fjavascript-basics%2Fscrolling-and-operators%2Fscroll-page-onclick" title="Log in" data-modal="open" data-value="login" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#login"></use></svg></span>Log in</a></li></ul></nav></div></div></header><div class="notice notice--error js--initialization-error hidden"><a class="notice__link" href="#"><span class="notice__title js--initialization-error__content"></span></a><button class="notice__close" type="button">Close</button></div><main class="course-container course-interface__content task"><div class="course-container__inner"><article class="course-layout js--user-settings" data-theme="ace/theme/ha-light-default" data-taskid="419" data-storageKey="task-419"><div class="course-loading-overlay course-layout__loading-overlay hidden"><div class="course-loading-overlay__inner"><span class="course-loading-overlay__image"><svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="clip-path" transform="translate(-3.2 -3.22)"><circle cx="38.65" cy="38.78" r="34.15" fill="#d5dcf1" stroke-dasharray="0"/></clipPath></defs><style>.keks-loader-circle { stroke-dasharray: 500; stroke-dashoffset: 1000; animation: dash 1.5s linear reverse infinite; } @keyframes dash { 0% { stroke-dashoffset: 0; }, 25% { stroke-dashoffset: 1000; }, 50% { stroke-dashoffset: 0; }, 75% { stroke-dashoffset: 1000; }, 100% { stroke-dashoffset: 0; } }</style><circle cx="35" cy="33" r="33" transform="matrix(.01053 -.96378 .9652 .01054 2.506 68.344)" fill="#D5DCF1" stroke="#F15A29" stroke-width="3.5"/><g transform="matrix(.9237 -.01338 0 .98374 2.38 -2.91)" clip-path="url(#clip-path)"><path d="M55.25 62.93c-1-2.23-2.81-5-4-7.27-.87-1.58-.39-3.35-2.32-3.16 0 0-2.81.84-3.88 1-1.07.16-4.65 3-5.91 3.44-1.55.56-3.29.19-4.93.19-1.686-.555-3.333-1.223-4.93-2-1-.74-7.26-2.32-7.45-1.77-.19.55-6.03 13.66-5.58 14.23.29.28 15 8.57 15.78 8.75 1.113.666 2.188 1.394 3.22 2.18.48.56 12.47-6 12.47-6.93 0 0 7.944-4.177 8.52-4.38 2.1-.74 2.804-.31-1-4.28h.01z" fill="#CF4A27"/><path d="M41.56 55.18c-.57-.47-1.06.46-.29 1 3.19 2.37 5.86 5.87 6.17 9.84-1.69-.58-3.44-.73-5.11-1.37a.53.53 0 0 0-.77.56 16.56 16.56 0 0 1-.07 4.57 12 12 0 0 1-4.29-2.88c-.29-.36-.87 0-.87.38-.17 1.7-.06 3.25-.9 4.72l-.15.15-.17-.17c-.82-1.46-.71-3-.88-4.68 0-.38-.59-.74-.87-.38a12.11 12.11 0 0 1-4.29 2.86 16.56 16.56 0 0 1-.07-4.56.53.53 0 0 0-.77-.56c-1.67.64-3.42.8-5.11 1.37.31-4 3-7.48 6.17-9.84.77-.56.29-1.49-.29-1-3.77 2.7-6.68 6.8-6.77 11.46a.51.51 0 0 0 .77.46c1.55-.71 3.33-.82 5-1.35-.15 1.61.13 3.14.13 4.79a.54.54 0 0 0 .77.46 21.65 21.65 0 0 0 4.47-2.6 9.28 9.28 0 0 0 1.09 4.37 2.32 2.32 0 0 0 .43.62l.1.06h.07a.59.59 0 0 0 .61-.1 2.1 2.1 0 0 0 .47-.72 9.49 9.49 0 0 0 1-4.31 22.19 22.19 0 0 0 4.48 2.6.54.54 0 0 0 .77-.46c0-1.65.28-3.17.13-4.79 1.68.53 3.45.64 5 1.35a.51.51 0 0 0 .77-.46c-.11-4.67-3-8.77-6.79-11.47z" fill="#F1662A"/><path d="M35.49 62.47s5-.38 6-1.49c4.65-5.4 9.1-6.7 9.1-6.7l-.68-1.39-14.53 2.8-13.37-2.7v1.49s3.49 1.21 8.24 6.61c1 1.1 5.14 1.38 5.24 1.38" style="isolation:isolate" fill="#A23922" opacity=".5"/><path d="M22.12 52.88c-1.75 5.5-5.33 8.66-6 14.34" fill="#F1662A"/><path d="M21.54 52.78c-1.64 5-5.33 9.12-6 14.43-.09.65.64 2 1.07 0 .68-5.21 4.45-9.31 6-14.16.19-.64-.87-.91-1.07-.27zm28.08.55c2 4.57 5.13 8.57 6.4 13.4.2.65 1.4.35 1.31-.29-1.25-4.93-4.7-9-6.83-13.67-.2-.55-1.17-.08-.88.57z" fill="#151841"/></g><circle class="keks-loader-circle" cx="35" cy="33" r="33" transform="matrix(.01053 -.96378 .9652 .01054 2.506 68.344)" fill="#D5DCF1" stroke-width="3.5" fill-opacity="0" stroke="#2A2F5A"/><path d="M54.838 32.26c-.084 4.648-.716 9.52-3.152 13.594-1.08 1.86-1.525 3.2-3.246 4.5-1.44 1.042-4.65.428-7.03 2.334 0 0-3.245 2.79-6.034 2.604-2.79-.186-5.403-2.427-5.403-2.427-1.348-1.293-4.584-1.562-6.574-2.25-2.344-.865-6.036-8.053-6.296-9.3l-.633-2.426c-.808-1.86-.994-3.98-1.98-5.887-.673-1.056-1.178-2.21-1.496-3.422-.55-2.603-1.163-5.28-1.628-7.875-.81-3.896-2.427-10.23.186-13.502 0 0 2.94-.67 8.192 4.845 2.52 2.25 5.04 6.51 8.193 7.7.62-.678 1.18-1.41 1.673-2.186.86.79 1.986 1.22 3.153 1.21.716 0 1.264-.69 1.794-.69.46.105.912.248 1.35.428 1.858.78 1.793-.864 2.872-.78 1.078.083 1.078 2.073 3.42.78l1.163-.018c2.976-3.115 8.908-11.084 13.948-9.96 4.502 1.126-.808 18.533-2.342 22.773" fill="#F15A29"/><path d="M59.422 11.486c-.93-3.72-5.216-2.334-7.56-.782-2.037 1.452-3.884 3.155-5.495 5.068-.716.78-1.442 1.646-2.25 2.51l-.93 1.042c-.312 0-.624.027-.93.084-.633.084-1.08.605-1.71.353-.35-.208-.664-.472-.93-.78-.554-.41-1.308-.41-1.86 0-.304.488-.882.73-1.442.605-.527-.242-1.07-.444-1.627-.605-.484-.003-.956.147-1.35.428-1.077.688-2.52-.26-3.328-.865-.246-.2-.608-.162-.81.084-.395.632-.84 1.232-1.328 1.795-2.427-1.21-4.138-3.47-5.766-5.45-1.53-1.704-3.177-3.3-4.928-4.78-.823-.765-1.765-1.394-2.79-1.86-.862-.325-1.788-.446-2.706-.352-.81 0-1.162 1.21-1.44 1.86-.434 1.19-.648 2.45-.633 3.72.097 2.626.46 5.237 1.077 7.792.363 1.562.55 3.198.93 4.76.243 1.77.667 3.507 1.265 5.19.812 1.57 1.532 3.19 2.157 4.844.362 1.21.808 2.427 1.078 3.636.312 1.247.735 2.464 1.265 3.635 1.11 2.42 2.566 4.667 4.323 6.668 1.71 1.86 4.585 1.47 6.75 2.51 2.075 1.47 4.325 2.94 6.845 3.292 2.52.353 5.04-1.562 7.208-3.2 1.71-.78 3.608-.78 5.402-1.384 1.795-.605 2.79-2.604 3.608-4.073 1.27-2.134 2.238-4.434 2.874-6.835.503-2.078.79-4.204.855-6.34.05-.433.125-.86.223-1.285 1.22-3.304 2.213-6.687 2.976-10.126.827-3.72 1.813-7.71 1.004-11.158zm-.93 4.584c-.225 2.128-.586 4.24-1.078 6.323-.71 3.194-1.602 6.345-2.67 9.438-.262.617-.407 1.276-.427 1.945-.092 1.935-.34 3.86-.744 5.756-.58 2.34-1.49 4.585-2.706 6.668-.93 1.646-1.794 3.636-3.868 4.156-.93.26-1.796.354-2.614.52.007-.335-.352-.553-.647-.392-.022.012-.042.025-.06.04-.91.582-1.78 1.22-2.614 1.906-1.71 1.21-3.607 2.334-5.672 2.25-1.535-.203-2.994-.792-4.24-1.71-.363-.177-1.44-1.042-1.627-1.126-.716-.52-1.35-.93-2.074-1.47-.363-.26-.716.085-.716.522-.716-.177-1.348-.26-1.98-.428-1.86-.428-2.874-1.86-3.962-3.376-1.68-2.457-2.94-5.18-3.72-8.052-.27-.93-.632-1.86-.93-2.94-.31-1.408-.862-2.754-1.626-3.98-.773-1.45-1.29-3.022-1.526-4.648-.363-1.562-.716-3.2-.995-4.845-.448-2.426-.996-4.76-1.266-7.27-.186-2.158-.186-4.585 1.08-6.51.57-.054 1.146-.026 1.71.083.9.318 1.727.818 2.427 1.47 1.265.93 2.344 2.073 3.506 3.115 2.706 2.334 5.496 7.44 8.555 7.97.693-.605 1.297-1.303 1.796-2.075.79.56 1.707.908 2.668 1.014.508.065 1.022-.06 1.442-.354.54-.408 1.295-.373 1.794.084.67.408 1.52.375 2.158-.084.25-.282.57-.49.93-.604.344.18.657.412.93.688.59.452 1.366.584 2.073.353.447-.083.633-.26 1.08-.353.32.042.646-.02.93-.177 1.525-1.646 2.975-3.375 4.5-4.937 1.676-1.96 3.766-3.527 6.12-4.585 1.44-.604 3.328-.78 3.96.865.428 1.55.486 3.177.167 4.752z" fill="#151841"/><path d="M48.524 33.04c-.236-.845-.932-1.483-1.795-1.646-.705-.074-1.413-.102-2.12-.083.083-.604.548-2.51-.81-2.333-.716 0-1.44 2.073-1.86 2.603-.715 1.042-1.162.78-1.264-.428-.102-1.208.446-2.854-.55-3.115-.715-.083-1.263 1.293-1.524 2.158-.083.427-.548.78-.362-2.25 0-.782 0-2.855-.447-2.94h-.186c-1.264.085-2.157 4.94-2.52 6.324-.27-1.386-1.71-7.273-2.79-5.98-.14.61-.202 1.234-.185 1.86 0 .427-.084 3.375-.447 2.854-.186-.864-1.162-2.603-1.71-2.334-.995.865-.187 2.074-.447 3.292s-.632 1.47-1.264.354c-.363-.52-.995-2.604-1.71-2.688-1.266-.176-.93 1.73-.93 2.334-.69-.076-1.383-.104-2.075-.083-.852.156-1.558.75-1.86 1.56-.084.177 0 6.668 5.95 6.76.862.043 1.72-.103 2.52-.427.52-.13.995-.558 1.45-.214l6.11.4c.342-.36.847-.51 1.33-.4.925.493 1.934.808 2.976.93 3.06 0 5.765-1.21 6.667-3.98.307-.103-.056-2.353-.15-2.53z" fill="#EFA75B"/><path d="M23.67 33.998s3.783-.354 4.77.177c1.095.612 1.896 1.642 2.22 2.854-.492.19-1.003.333-1.524.427-.616.09-1.237.15-1.86.177-3.06-.354-3.607-3.636-3.607-3.636zm23.6.51s-3.72-.52-4.772-.082c-1.16.554-2.038 1.564-2.426 2.79l1.44.52c.604.18 1.23.266 1.86.26 3.18-.195 3.897-3.487 3.897-3.487zm-7.03 2.605c.27.084 1.16.428 1.44.52.53.155 1.076.242 1.627.26h.186c2.706-.083 3.608-2.854 3.72-3.29-1.053-.157-2.116-.235-3.18-.233-.487-.017-.973.042-1.442.176-1.128.46-1.992 1.402-2.35 2.567z" fill="#FFF"/><path d="M32.223 43.26c-.152-1.397-.03-2.81.363-4.157 0 0 .93-2.94 2.343-3.2 3.72-.687 4.054 7.44 4.054 7.44-4.334 1.906-6.76-.084-6.76-.084z" fill="#F47741"/><path d="M45.204 44.292c-.508-.698-1.296-1.14-2.157-1.21-1.71-.176-7.56 1.126-7.56 1.126v.065c-.772-.205-5.98-1.6-7.56-1.45-.875.04-1.692.45-2.25 1.125-.446.864.084 2 .55 2.938.74 1.35 1.788 2.505 3.058 3.375.48.332 1.045.513 1.627.522 4.492.084 4.77-2.585 4.77-2.464l.075-.465c.186 0-.363 2.79 4.054 2.79.542.102 1.1.073 1.628-.084 1.305-.853 2.39-2 3.17-3.35.41-.92 1.043-1.96.596-2.918z" fill="#EFA75B"/><path d="M31.963 50.968c-.197-.004-.358-.157-.372-.353-.018-.207.158-.378.364-.354 3.245-.26 3.505-2.156 3.608-2.25-.006-.19.183-.325.362-.26.193.01.35.16.363.354 0 .084 0 1.906 3.422 2 .192.008.348.16.362.353-.018.19-.172.34-.363.353-1.352.11-2.68-.4-3.61-1.386-.095-.096-.16-.22-.185-.353-.982 1.174-2.423 1.866-3.952 1.898z" fill="#151841"/><path d="M32.14 43.427c.186-.52 3.608.083 3.608.083s2.975-.688 3.422.084c-.05.288-.175.557-.363.78-.515-.056-1.037.004-1.525.178-.333.61-.488 1.304-.446 2-.222.394-.574.7-.995.864-.398-.112-.75-.354-.994-.688.047-.75-.146-1.496-.55-2.13-.27-.26-1.264.084-1.626-.083l-.53-1.088zm6.89.242c-.05.286-.175.556-.363.78-.503-.063-1.015-.012-1.497.148-.333.612-.487 1.305-.446 2-.222.394-.574.7-.995.864-.4-.112-.75-.354-.996-.688.053-.76-.14-1.515-.55-2.157-.268-.26-1.263.084-1.626-.084-.26-.23-.45-.53-.55-.864" fill="#CF4A27"/><path d="M35.748 47.853c-.587-.226-1.072-.655-1.367-1.21-.022-.634-.144-1.262-.362-1.86h-.567c-.31.073-.636.043-.93-.082-.35-.253-.61-.616-.734-1.03-.082-.17.006-.374.186-.43.172-.083.38 0 .447.177.056.278.215.524.445.69h.586c.37-.086.757-.023 1.08.175.413.585.634 1.284.632 2v.353c.185.177.4.32.632.428.22-.18.42-.382.595-.605-.004-.29.024-.58.083-.865.026-.48.22-.94.55-1.292.506-.235 1.07-.325 1.626-.26.077-.108.14-.227.185-.353-.038-.148.042-.3.186-.353.145-.11.352-.07.447.083.084.084.27.428-.446 1.21-.083.083-.185.176-.27.083-.422-.033-.848-.004-1.264.084-.215.502-.323 1.043-.316 1.59v.176c-.326.57-.824 1.023-1.422 1.293zm-7.198-14.04c-.788-.226-1.61-.314-2.427-.26-1.264 0-2.436.082-2.52.082h-.38v.354s.715 3.55 3.96 3.895c.693.006 1.385-.025 2.074-.093.27-.084 1.71-.428 1.71-.428-.025-1.56-.975-2.956-2.417-3.552zm.53 3.207c-.558.142-1.135.2-1.71.177-1.14-.075-2.16-.728-2.707-1.73-.247-.37-.432-.78-.548-1.21.455 0 1.18-.092 2.073-.175h.596c-.084.688-.242 2.464.483 2.334.725-.13.837-1.46.93-2.13h.112c.937.492 1.647 1.33 1.98 2.334-.388.176-.793.31-1.21.4zm18.365-2.864c-1.104-.145-2.215-.232-3.33-.26-.546-.01-1.093.05-1.626.176-1.166.483-2.08 1.425-2.53 2.604l-.158.79 1.795.623c.558.153 1.132.24 1.71.26h.28c3.245-.177 4.137-3.72 4.137-3.72l.084-.353zm-1.264 1.86c-.54 1.394-2.882 1.646-2.966 1.646-.517-.02-1.03-.11-1.525-.26-.186-.085-.633-.26-1.08-.43.374-.966 1.117-1.746 2.065-2.165 0 .68.158 1.953.81 2.083.65.13.613-1.535.566-2.26.934.005 1.865.064 2.79.177-.11.316-.473.65-.66 1.17z" fill="#151841"/><path d="M19.26 39.27c.535 1.362 1.56 2.473 2.874 3.115.534.312 1.204-.07 1.207-.69.002-.285-.15-.55-.397-.695-.918-.46-1.65-1.222-2.073-2.158-.344-.957-1.972-.52-1.61.428zm29.45 3.125c1.083-.59 2.01-1.428 2.706-2.446.3-.556-.112-1.228-.743-1.21-.293.007-.56.17-.698.428-.568.776-1.306 1.412-2.158 1.86-.394.23-.517.742-.27 1.125.263.376.773.482 1.163.242z" fill="#EFA75B" stroke-width="13"/><path d="M16.025 32.436c1.525-1.386 2.427-4.408 2.79-6.835-.084.354 2.613.43 4.138-1.208 1.078-1.125.446-2-.186-3.375-1.71-3.552-4.585-6.323-7.384-8.918-.716-.69-1.44-2.428-2.706-2-.995.353-.93 3.2-.716 4.073 1.09 7.448 4.065 18.263 4.065 18.263zm37.372-.78c-1.704-1.826-2.822-4.12-3.208-6.585 0 .354-2.614.354-4.056-1.29-.995-1.127-.362-1.86.363-3.117 1.86-3.198 4.863-5.718 7.746-8.136.81-.604 1.627-1.47 2.79-.93.994.428.715 2.334.548 3.115-1.083 5.72-2.48 11.376-4.183 16.943z" fill="#FFF"/><path d="M53.564 20.422c-1.98.51-4.138 1.636-5.105 3.487-.43-2.196 1.645-4.65 3.393-5.832.333-.21.312-.703-.037-.886-.162-.085-.357-.076-.512.022-2.157 1.562-4.417 4.5-3.784 7.188.076.262.354.41.614.325l-.075.28c-.085.603.93.864.994.26.446-2.158 2.706-3.376 4.77-3.897.372-.076.522-.526.27-.81-.133-.15-.342-.204-.53-.138zM17.457 18.06c-.55-.354-.995.428-.55.865 1.433 1.004 3.182 3.05 3.395 4.956-.93-1.86-3.05-2.975-5.105-3.486-.386-.005-.633.41-.445.747.042.076.103.14.176.184 2.073.52 4.324 1.73 4.77 3.896.106.328.5.46.78.26.273.192.653.06.745-.26.735-2.66-1.6-5.728-3.766-7.16z" fill="#F1662A"/></svg></span><p class="course-loading-overlay__message"><b class="course-loading-overlay__message-title">Loading…</b><br><span class="course-loading-overlay__message-text">Everything will be ready in few seconds</span></p></div></div><div class="course-layout__sidebar course-theory"><div class="course-theory__inner course-theory__inner--left-stub"><button class="course-theory__close icon-close icon-close--light" type="button">Close</button><ul class="course-tabs course-tabs--non-interactive course-layout__theory-heading js--theory-tabs"><li class="course-tabs__item course-tabs__item--external course-tab course-tab--centered"><span class="course-tab__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-theory"></use></svg></span><span class="course-tab__title">Theory</span></li><li class="course-tabs__item course-tabs__item--internal course-tab course-tab--centered course-tab--active js--theory-tab__theory"><span class="course-tab__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-theory"></use></svg></span><span class="course-tab__title">Theory</span></li><li class="course-tabs__item course-tabs__item--internal course-tab course-tab--centered js--theory-tab__comments"><span class="course-tab__icon"><svg aria-hidden="true" style="width: 16px; height: 16px; fill: #2e2c9c;"><use xlink:href="/img/sprites/up.svg#comment"></use></svg></span><span class="course-tab__title">Comments</span></li></ul><section class="course-theory__content"><div class="js--theory-pane__theory course-theory__content-inner"><h1 class="course-theory__content-heading">Scroll page on click</h1><div class="course-theory__content-text"><p>Great: we have learned how to scroll down the page using JavaScript! We need the page to scroll back up to the beginning when the user clicks on the “Up” button.</p><p>We already found the button. Now we need to add the <code>onclick</code><a href="/courses/intro-to-web-development/javascript/event-handler">event handler</a> to it. After that, transfer the instruction with <code>scrollTo</code> inside the handler and verify that when you click on the button, the page scrolls back up to the beginning.</p><div class="info info--frame-heading info--frame-heading--bytheway info--green"><p>By default, automatic scrolling occurs very quickly in browsers: it seems to instantaneously jump back to the top of the page. It in order to make the transition less abrupt, we used the <code class="nowrap">scroll-behavior</code> CSS property with the <code>smooth</code> value. You can find out more about this property from the <a href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior" target="_blank" rel="nofollow noopener">specification</a>. Note that this type of <a href="https://www.theguardian.com/technology/2013/sep/27/ios-7-motion-sickness-nausea" target="_blank" rel="nofollow noopener">scrolling can make some people sick</a>, and Operating Systems allow them to indicate that they prefer reduced motion. CSS can use the <a href="https://css-tricks.com/introduction-reduced-motion-media-query/" target="_blank" rel="nofollow noopener">Reduced Motion Media Query</a> to override smooth scrolling for people with vestibular disorders.</p></div></div></div><div class="js--theory-pane__comments hidden course-theory__content-inner"><div class="course-theory__content-text"><h2 class="course-theory__content-heading">Comments</h2><div id="disqus_thread"></div><script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
var disqus_config = function () {
this.page.url = "https://htmlacademy.org/courses/javascript-basics/scrolling-and-operators/scroll-page-onclick";
this.page.identifier = "task-419";
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://htmlacademy.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script><noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript></div></div></section><div class="course-theory__controls"><button class="button button--close" type="button">To the task</button></div></div></div><div class="course-layout__column course-layout__column--left"><div class="js--course-tabs course-tabs course-tabs--left course-layout__course-tabs-wrapper"><div class="course-tabs__item course-tabs__files-tab course-tab js--editor-tab js--editor-files-tab"><span class="course-tab__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#files"></use></svg></span><span class="course-tab__title">Files</span></div><div class="course-tabs__scroller-wrapper"><button class="hidden course-tabs__button-scroll course-tabs__button-scroll--left js--course-tabs-btn-scroll-left"><span class="sr-only">To the left</span><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#arrow-right"></use></svg></button><div class="js--course-tabs-scroller course-tabs__scroller course-layout__course-tabs course-layout__course-tabs--scroller"><ul class="js--course-tabs-list course-tabs__list"></ul></div><button class="hidden course-tabs__button-scroll course-tabs__button-scroll--right js--course-tabs-btn-scroll-right"><span class="sr-only">To the right</span><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#arrow-right"></use></svg></button></div></div><div class="js--files hidden"><div
class="js--file"
data-visible="true"
data-active="false"
data-enabled="false"
data-title="index.html"
data-mode="html"
data-src="index.html"
data-selection=""
data-scroll-to=""
data-left-url-part=""
data-right-url-part=""
data-right-url-part-active="false"
data-browser-tab="false"
data-browser-tab-name=""
data-browser-tab-active="false"
data-browser-scroll=""><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<a class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo">
</a>
<a href="subscription.html" class="subscription-link">Subscription</a>
<button class="theme-button" type="button">Change the theme</button>
</div>
</header>
<main class="index-main">
<div class="container">
<h1 class="visually-hidden">FlashNews news portal!</h1>
<div class="news-view">
<button class="row-view view-checked" type="button">Results list</button>
<button class="tile-view" type="button">Tile</button>
</div>
<section class="news-list">
<h2 class="visually-hidden">All News</h2>
<article class="news-block" data-category="cats">
<img src="img/news-cat.jpg" alt="Cat eyes">
<div class="news-block-text">
<h3>Unique video!</h3>
<p>Discover the World Through the Eyes of Cats! Your life will never be the same…</p>
<span class="news-tag">#Kitties</span>
<time datetime="2020-03-24">March 24, 2020</time>
</div>
</article>
<article class="news-block" data-category="HR">
<img src="img/walk.jpg" alt="People go for walks">
<div class="news-block-text">
<h3>It can be healthy to go for a walk</h3>
<p>But it might not be if you take a stroll with the wrong people…</p>
<span class="news-tag">#HR</span>
<time datetime="2020-03-19">February 19, 2020</time>
</div>
</article>
<article class="news-block" data-category="games">
<img src="img/ar.jpg" alt="Person wearing virtual reality glasses">
<div class="news-block-text">
<h3>Augment your reality</h3>
<p>The editors of Flashnews! have prepared a gift for their subscribers…</p>
<span class="news-tag">#Games</span>
<time datetime="2020-02-18">February 18, 2020</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/drone.jpg" alt="A small drone">
<div class="news-block-text">
<h3>Dronovirus</h3>
<p>The designers at the DogDrones.inc laboratory have assured that their drones cannot be carriers of dangerous
viruses…</p>
<span class="news-tag">#IT</span>
<time datetime="2019-12-22">December 22, 2019</time>
</div>
</article>
<article class="news-block" data-category="HR">
<img src="img/new-research.jpg" alt="A man looks at a board with cards">
<div class="news-block-text">
<h3>From the world of psychology</h3>
<p>Studies show that if you do more, you can actually get more done.</p>
<span class="news-tag">#HR</span>
<time datetime="2019-10-12">October 12, 2019</time>
</div>
</article>
<article class="news-block" data-category="games">
<img src="img/new-drone.jpg" alt="Quadcopter">
<div class="news-block-text">
<h3>A quadcopter is not just a fancy toy</h3>
<p>Controlling the quadcopter allows you to develop agility, spatial thinking, and the ability to climb trees…
</p>
<span class="news-tag">#Games</span>
<time datetime="2019-11-21">November 21, 2019</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/new-loop.jpg" alt="Infinite loops">
<div class="news-block-text">
<h3>Infinite loops: It’s time to end them</h3>
<p>British scientists have discovered that the ability of software to function directly depends on the presence of infinite loops in it.</p>
<span class="news-tag">#IT</span>
<time datetime="2019-10-16">October 16, 2019</time>
</div>
</article>
<article class="news-block" data-category="cats">
<img src="img/news-robot2.jpg" alt="A robot vacationing at a resort">
<div class="news-block-text">
<h3>What shocking news! It’s so scandalous! Such a sensation!</h3>
<p>It turns out that you don’t have to be a cat to start programming in JavaScript!</p>
<span class="news-tag">#Kitties</span>
<time datetime="2019-12-22">December 22, 2019</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/new-graph.jpg" alt="New library">
<div class="news-block-text">
<h3>New graphics library</h3>
<p>Now you can create a dashboard in just a matter of seconds.</p>
<span class="news-tag">#IT</span>
<time datetime="2019-10-14">October 14, 2019</time>
</div>
</article>
<article class="news-block" data-category="cats">
<img src="img/new-cat.jpg" alt="Cat at a laptop">
<div class="news-block-text">
<h3>This just in: SHOCKING NEWS! Secret photos from the cat nursery</h3>
<p>No one expected that THIS was going on behind the closed doors…</p>
<span class="news-tag">#Kitties</span>
<time datetime="2019-10-13">October 13, 2019</time>
</div>
</article>
</section>
</div>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="FlashNews! portal logo">
</a>
</div>
</footer>
<button class="up-button" type="button">
↑
<span class="visually-hidden">Up</span>
</button>
<script src="script.js"></script>
<script src="themes.js"></script>
<script src="up-button.js"></script>
</body>
</html>
</div><div
class="js--file"
data-visible="false"
data-active="false"
data-enabled="false"
data-title="style.css"
data-mode="css"
data-src="style.css"
data-selection=""
data-scroll-to=""
data-left-url-part=""
data-right-url-part=""
data-right-url-part-active="false"
data-browser-tab="false"
data-browser-tab-name=""
data-browser-tab-active="false"
data-browser-scroll="">html {
scroll-behavior: smooth;
}
.hidden {
display: none;
}
.subscription-link {
position: relative;
padding-top: 8px;
padding-right: 2px;
padding-bottom: 6px;
padding-left: 26px;
margin: auto 4%;
}
.subscription-link::before {
position: absolute;
content: "";
width: 18px;
height: 12px;
top: 9px;
left: 2px;
}
.subscription-link:hover {
padding-bottom: 4px;
border-bottom: 2px solid;
}
.subscription-link:active {
opacity: 0.6;
}
.light-theme .subscription-link {
color: #6653d9;
outline-color: #b6aaff;
}
.light-theme .subscription-link:hover {
border-color: #6653d9;
}
.light-theme .subscription-link::before {
background-image: url("img/letter-light.svg");
}
.dark-theme .subscription-link {
color: #9484f2;
outline-color: #6653d9;
}
.dark-theme .subscription-link:hover {
border-color: #9484f2;
}
.dark-theme .subscription-link::before {
background-image: url("img/letter-dark.svg");
}
.up-button {
position: fixed;
z-index: 1;
padding: 0;
bottom: 75px;
right: 20px;
width: 64px;
height: 64px;
font-size: 36px;
font-weight: bold;
text-align: center;
vertical-align: middle;
border: 5px solid;
border-radius: 50%;
display: none;
cursor: pointer;
}
.light-theme .up-button {
color: #6653d9;
background-color: rgba(255, 255, 255, 0.8);
border-color: #6653d9;
outline-color: #b6aaff;
}
.light-theme .up-button:hover {
color: #473c8d;
background-color: rgba(255, 255, 255, 0.8);
border-color: #473c8d;
}
.dark-theme .up-button {
color: #9484f2;
background-color: rgba(10, 9, 16, 0.6);
border-color: #9484f2;
outline-color: #6653d9;
}
.dark-theme .up-button:hover {
color: #6653d9;
background-color: rgba(10, 9, 16, 0.6);
border-color: #6653d9;
}
.shown {
display: inline-block;
}
/* News tags styles */
.news-tag {
padding: 4px 8px;
margin: 0 auto 0 0;
border-radius: 12px;
}
.list-tiles-view .news-tag {
margin-bottom: 4px;
}
.light-theme .news-tag {
color: #aaaaaa;
background-color: #f2f2f2;
}
.dark-theme .news-tag {
color: #888888;
background-color: #0a0910;
}
</div><div
class="js--file"
data-visible="true"
data-active="true"
data-enabled="true"
data-title="up-button.js"
data-mode="js"
data-src="up-button.js"
data-selection="[10,0,10,50]"
data-scroll-to=""
data-left-url-part=""
data-right-url-part=""
data-right-url-part-active="false"
data-browser-tab="false"
data-browser-tab-name=""
data-browser-tab-active="false"
data-browser-scroll="">let upButton = document.querySelector('.up-button');
window.onscroll = function () {
if (window.pageYOffset > 200) {
upButton.classList.add('shown');
}
};
window.scrollTo(0, 0);
// Add the event handler here
</div><div
class="js--file"
data-visible="false"
data-active="false"
data-enabled="false"
data-title="script.js"
data-mode="js"
data-src="script.js"
data-selection=""
data-scroll-to=""
data-left-url-part=""
data-right-url-part=""
data-right-url-part-active="false"
data-browser-tab="false"
data-browser-tab-name=""
data-browser-tab-active="false"
data-browser-scroll="">let rowViewButton = document.querySelector('.row-view');
let tileViewButton = document.querySelector('.tile-view');
let newsList = document.querySelector('.news-list');
rowViewButton.onclick = function () {
rowViewButton.classList.add('view-checked');
tileViewButton.classList.remove('view-checked');
newsList.classList.remove('list-tiles-view');
};
tileViewButton.onclick = function () {
rowViewButton.classList.remove('view-checked');
tileViewButton.classList.add('view-checked');
newsList.classList.add('list-tiles-view');
};
</div><div
class="js--file"
data-visible="false"
data-active="false"
data-enabled="false"
data-title="themes.js"
data-mode="js"
data-src="themes.js"
data-selection=""
data-scroll-to=""
data-left-url-part=""
data-right-url-part=""
data-right-url-part-active="false"
data-browser-tab="false"
data-browser-tab-name=""
data-browser-tab-active="false"
data-browser-scroll="">let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
</div></div><div class="course-layout__files hidden"></div><div class="course-layout__editors"></div><div class="course-editor-controls"><button class="course-editor-controls__item course-editor-controls__item--answer" type="button">Show the answer</button></div><div class="js--feedback course-unhappy"><button class="js--feedback-btn course-unhappy__button" type="button"><span class="sr-only">Complain</span><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#unhappy"></use></svg></button><div class="js--feedback-modal course-unhappy__modal course-unhappy__modal--step-one"><form method="POST" action="/courses/javascript-basics/scrolling-and-operators/scroll-page-onclick/signal" class="course-unhappy__form form"><input type="hidden" name="csrf_name" value="csrf69aed39f25d30"><input type="hidden" name="csrf_value" value="3027c385df1527e688748192fe735b82"><p class="course-unhappy__text">What didn’t you like in this task?</p><div class="course-unhappy__slide"><div class="course-unhappy__wrap"><div class="course-unhappy__list"><label class="checkbox checkbox--small"><input class="checkbox__input" name="problems" value="1" type="checkbox"><span class="checkbox__text">The code check doesn’t work</span></label><label class="checkbox checkbox--small"><input class="checkbox__input" name="problems" value="2" type="checkbox"><span class="checkbox__text">The task is too difficult</span></label><label class="checkbox checkbox--small"><input class="checkbox__input" name="problems" value="3" type="checkbox"><span class="checkbox__text">The theory is hard to understand</span></label><label class="checkbox checkbox--small"><input class="js--feedback-other-checkbox checkbox__input" name="problems" value="0" type="checkbox"><span class="checkbox__text">Other (will write below)</span></label></div><div class="course-unhappy__message"><label class="sr-only" for="id-message">Другое (сейчас напишу)</label><textarea class="field field--area" id="id-message" name="message" placeholder="For example, a typo in the word «heading»"></textarea></div></div></div><button class="course-unhappy__control course-unhappy__control--prev" type="button"><span class="sr-only">Prev</span><svg aria-hidden="true"><use xlink:href="/img/sprites/landings.svg#arrow"></use></svg></button><button class="course-unhappy__control course-unhappy__control--next" type="button" disabled><span class="sr-only">Next</span><svg aria-hidden="true"><use xlink:href="/img/sprites/landings.svg#arrow"></use></svg></button><button class="js--submit-btn button" disabled>Submit</button></form><p class="course-unhappy__result hidden">Thanks! We’ll fix everything at once!</p></div></div></div><div class="course-layout__column course-layout__column--right"><span class="course-separator-control"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-arrows-separator"></use></svg></span><div class="course-browser course-layout__browser"><div class="course-browser__menu"><span class="course-browser__menu-item course-browser__address"><span class="course-browser__menu-item-inner"><span class="course-browser__address-text"></span></span></span><button class="js--autorun course-browser__menu-item course-browser__menu-button course-browser__menu-button--text-with-icon course-browser__menu-button--autorun course-browser__menu-button--autorun-on" title="Autorun" type="button"><span class="course-browser__menu-item-inner"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-autorun"></use></svg>
Autorun
</span></button><button class="course-browser__menu-item course-browser__menu-button course-browser__menu-button--expand" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11"><path d="M1.375 5.125v4.5h4.5m3.75-3.75v-4.5h-4.5" fill="none" fill-rule="evenodd" stroke="currentColor"></path></svg></button></div><div class="course-browser__notification js--browser-change-heading hidden"><p class="course-browser__notification-text">The code has changed, click “Refresh” or turn autorun on.</p><button class="course-browser__notification-button course-browser__notification-button--refresh js--close" type="button"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-refresh"></use></svg>
Refresh</button></div><div class="course-browser__content"><div class="course-browser__modal js--browser-modal"><div class="course-browser__notification course-browser__modal-heading js--browser-modal-heading"><p class="course-browser__notification-text">You’ve gone to a different page</p><button class="course-browser__notification-button js--close" type="button">← Go back</button></div><div class="course-browser__zoomer"><iframe class="js--preview-document course-browser__content course-browser__zoomer-element"></iframe><p class="course-browser__focus-message">
Click inside the mini-browser to shift the focus onto this window.
</p></div></div><div class="course-browser__menu course-browser__menu--vertical"><button class="course-browser__menu-item course-browser__menu-button course-browser__menu-button--increase" type="button" disabled title="Larger"><span class="course-browser__menu-item-inner">Larger</span></button><span class="course-browser__menu-item course-browser__zoom"><span class="course-browser__menu-item-inner">100%</span></span><button class="course-browser__menu-item course-browser__menu-button course-browser__menu-button--decrease" type="button" title="Smaller"><span class="course-browser__menu-item-inner">Smaller</span></button></div><div class="js--validation-view course-browser__results-restriction course-browser__results-restriction--mini"><span class="tooltip tooltip--light tooltip--short course-browser__results-restriction-tooltip"><span class="js--tooltip-text"></span><button class="js--validation-view-close course-browser__results-restriction-tooltip-close icon-close" type="button">Закрыть</button></span></div></div><div class="console console--modal console--modal-collapsed js--console"><div class="console__heading"><span class="console__heading-title">Console<span class="console__counter hidden js--console__counter"></span></span><button class="console__heading-button js--console__toggle" type="button" title="Switch console"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-collapse"></use></svg></button></div><div class="console__content js--console__content"></div></div><div class="course-goals js--goals"><div class="course-goals__heading"><span class="course-goals__heading-title"><span class="course-goals__count-label">Goals</span><span class="course-goals__count">completed</span></span><div class="js--annotations course-task-stats course-task-stats--disabled course-task-stats--centered "><span class="course-task-stats__indicator"><svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 8C15 11.866 11.866 15 8 15C4.13403 15 1 11.866 1 8C1 4.13403 4.13403 1 8 1C11.866 1 15 4.13403 15 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58173 16 0 12.4183 0 8C0 3.58173 3.58173 0 8 0C12.4183 0 16 3.58173 16 8ZM6.7287 3.88849C6.6958 3.59229 6.92761 3.33325 7.22565 3.33325H8.77502C9.07306 3.33325 9.30487 3.59229 9.27197 3.88849L8.71643 8.88849C8.68829 9.14166 8.47424 9.33325 8.21948 9.33325H7.78119C7.52643 9.33325 7.31238 9.14166 7.28424 8.88849L6.7287 3.88849ZM9.33368 12.0001C9.33368 12.7365 8.73669 13.3334 8.00031 13.3334C7.26392 13.3334 6.66699 12.7365 6.66699 12.0001C6.66699 11.2637 7.26392 10.6667 8.00031 10.6667C8.73669 10.6667 9.33368 11.2637 9.33368 12.0001Z" fill="currentColor"></path></svg><span class="js--annotations-counter course-task-stats__counter">0</span></span><div class="course-task-stats__scroller-wrapper"><div class="course-task-stats__scroller"><ul class="js--annotations-list course-task-stats__list"></ul></div></div></div><button class="course-goals__button course-goals__button--expand js--goals__expand" type="button"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-collapse"></use></svg></button><a class="course-goals__button course-goals__button--next button button--green button--without-border hidden" href="/courses/javascript-basics/scrolling-and-operators/finish-button" title="Finish working on the “Up” button"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#arrow-white--mini"></use></svg></a></div><div class="course-goals__content"><ol class="course-goals__list"><li class="course-goals__list-item">On line 10, add the <code>onclick</code> event handler to the <code>upButton</code> element.</li><li class="course-goals__list-item">Move the <code class="nowrap">window.scrollTo(0, 0);</code> instruction from line 9 inside the <code>onclick</code> handler.</li><li class="course-goals__list-item">Scroll down the page in the mini-browser to make the arrow button appear. Press this button.<br>
Notice how the page scrolls back to the start, but the button doesn’t disappear.</li></ol></div></div></div></div></article></div><div class="course-interface__overlay course-interface__overlay--active"></div></main><script
src="https://assets.htmlacademy.org/scripts/courses-spa/htmlacademy-task.v43.js"
data-task-type="mf/html-css-js"
data-assets-path="https://assets.htmlacademy.org/scripts/courses-spa/"
data-lang="en"
></script><script>HtmlacademyTask.setup(function(){this.setView(HtmlCssView,function(){this.showPreview()}),this.setRunner(HtmlCssRunner,function(){this.disableScrollPersistence()}),this.setChecker(HtmlCssJsChecker,function(){this.setMatcher(function(t){t.goal("onclick.empty").code("'#builtin.anything'; '#if.addClass'; '#button.onClick'; '#builtin.anything';").goal("onclick.full").takes("onclick.empty").assign("button.onClick","button.onClick.fixed").fragment("if.addClass").code("window.onscroll = '#builtin.anything';").fragment("button.onClick").code("window.scrollTo(0, 0); upButton.onclick = function () {}","'#button.onClick.fixed'").fragment("button.onClick.fixed").code("upButton.onclick = function () {window.scrollTo(0, 0);}")}),this.addGoal("onclick.empty",function(t,n,o){return o.file("up-button.js").matches("onclick.empty")}),this.addGoal("onclick.full",function(t,n,o){return o.file("up-button.js").matches("onclick.full")});var t=this;this.addTrigger(".up-button","click",function(){t.isSolved("onclick.empty")&&t.isSolved("onclick.full")&&t.setGoalCompleted("button.click")}),this.addGoal("button.click",function(){return!1})}),this.setAnswers([{goal:1,editor:"up-button.js",data:function(){this.tooltip("Add the <code>onclick</code> event handler to the <code>upButton</code> element").at(9,0).find("// Add the event handler here").replace("upButton.onclick = function () {\n\n};")}},{goal:2,editor:"up-button.js",data:function(){this.tooltip('Move the <code class="nowrap">window.scrollTo(0, 0);</code> instruction inside the event handler').at(8,0).find("window.scrollTo(0, 0);").remove().at(10,2).add("window.scrollTo(0, 0);")}}])});</script><script>HtmlacademyTask.setupAssets({"setting.css":"@keyframes comment-blink-light{0%{background-color:#b6aaff;opacity:0}20%{opacity:.8}}@keyframes comment-blink-light-after{0%{border-right-color:#b6aaff;border-bottom-color:#b6aaff;opacity:0}20%{opacity:.8}}@keyframes comment-blink-dark{0%{background-color:#473c8d;opacity:0}20%{opacity:1}}@keyframes comment-blink-dark-after{0%{border-right-color:#473c8d;border-bottom-color:#473c8d;opacity:0}20%{opacity:1}}@keyframes tooltip-opener{0%{transform:translate(50%) scaleX(0)}to{transform:translate(100%) scaleX(100%)}}*{box-sizing:border-box}.visually-hidden:not(:focus):not(:active),input[type=checkbox].visually-hidden,input[type=radio].visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}body{margin:0;font-family:\"Verdana\",\"Tahoma\",sans-serif;font-size:12px;line-height:16px}a{font:inherit;color:inherit;text-decoration:none}.container{display:flex;position:relative;max-width:600px;margin:0 auto;padding:0 10px}.page-header .container{min-height:42px}.inner-heading{margin:20px 0 4px;font-size:24px;line-height:32px}.header-link,.header-logo{display:flex;margin-right:auto;align-items:center}.header-link{font-size:14px;line-height:20px}.header-link::before{content:\"\";width:10px;height:18px;padding-right:8px;display:inline-block;vertical-align:text-bottom}.menu,.theme-button{position:relative;cursor:pointer}.theme-button{margin:auto 0;padding:7px 16px 7px 36px;border-radius:2px;background-color:transparent;font-size:12px}.theme-button::before{position:absolute;content:\"\";width:15px;height:15px;top:7px;left:12px}.main-menu a:active,.menu-close:active,.menu-open:active,.theme-button:active{opacity:.8}.menu{margin-right:-10px;margin-left:24px;width:42px;height:42px;font-size:0;border:0;background-repeat:no-repeat;background-position:center}.menu-close{background-image:url(img\/menu-close.svg)}.main-menu{position:absolute;z-index:1;padding:0;top:42px;right:0}.menu-open+.main-menu{display:none}.main-menu ul{list-style:none;margin:0;padding:10px 0}.main-menu a{display:block;padding:10px 56px 10px 20px}.index-main,.inner-main,.inner-news{padding:0;min-height:calc(100vh - 84px)}.index-main .container,.inner-main .container,.inner-news .container{flex-direction:column}.news-view{display:flex;margin:20px 0}.news-view button{position:relative;padding:7px 14px 7px 32px;font-size:inherit;border-radius:16px;background-color:transparent}.news-view button:first-child{margin-right:10px}.row-view::before,.tile-view::before{position:absolute;content:\"\";top:9px;left:16px;width:12px;height:10px}.tile-view::before{width:10px}.news-list{margin-bottom:20px}.news-list-heading{flex-basis:100%}.news-block{display:flex;margin-bottom:10px;padding:12px 12px 16px}.news-block img{margin-right:12px;width:56px;height:56px;object-fit:cover;flex-shrink:0}.list-tiles-view.news-list,.news-block-text{display:flex;flex-wrap:wrap}.news-block h3{margin:0 0 4px;font-size:14px;line-height:20px}.news-block p{margin:0 0 8px;width:100%}.news-block time{margin:0;padding:4px 0 0}.list-tiles-view.news-list{margin-bottom:20px;margin-right:-10px}.list-tiles-view .news-block{flex-basis:calc(50% - 10px);margin-right:10px;margin-bottom:15px;flex-direction:column}.list-tiles-view .news-block img{position:relative;width:calc(100% + 24px);top:-12px;left:-12px;height:146px;margin-right:0}.list-tiles-view .news-block .news-block-text{display:flex;flex-direction:column;flex-grow:1}.list-tiles-view .news-block time{margin-top:auto}.cookies-agreement{z-index:1;display:flex;flex-direction:column;position:fixed;bottom:0;width:100%;padding:10px 20px 20px}.cookies-agreement .button{margin-left:auto}.cookies-agreement-closed{display:none}.button{font-size:12px;border:0;padding:7px 16px;border-radius:2px;cursor:pointer}.button:active{opacity:.8}.page-footer{margin-top:auto;min-height:42px}.footer-logo{margin-left:auto;display:block;padding:6px 0 3px}.page-footer p{margin:auto 0}.subscription{display:flex;margin-bottom:12px;padding:20px 12px}.subscription-message{position:relative;margin-left:24px;padding:12px 32px 40px;border-radius:0 32px;font-size:18px;line-height:24px}.subscription-message::before{position:absolute;content:\"\";width:48px;height:48px;top:0;left:-24px}.subscription-inner{position:relative;flex-grow:1;margin-right:10px}.subscription-label{position:absolute;top:-12px;font-size:10px;line-height:14px}.subscription-email{width:100%;height:30px;border:0;background-color:transparent;font:inherit;font-size:14px;line-height:30px;outline:0}.comment-field::placeholder,.subscription-email::placeholder{color:#aaa;font:inherit;font-size:14px;font-style:italic}.subscription-email:focus::placeholder{font-size:0}.subscription-email:active::placeholder,.subscription-email:hover::placeholder{opacity:.5}.comment-form{display:flex;flex-wrap:wrap;margin-bottom:30px;padding:20px 12px}.comment-inner{position:relative;width:100%}.comment-label{position:absolute;top:-16px;left:-9px;padding:4px 8px;font-size:10px;line-height:14px}.comment-field{width:100%;height:30px;padding:0 10px;border:0;background-color:transparent;font:inherit;font-size:14px;line-height:30px}.comment-field:focus::placeholder{font-size:0}.comment-field:active::placeholder,.comment-field:hover::placeholder{opacity:.5}.inner-news .inner-heading{margin-bottom:20px;font-size:24px}.news-full{position:relative;display:flex;flex-direction:column;margin-bottom:24px}.news-full img{margin-bottom:4px;width:100%;height:220px;object-fit:cover}.news-full .news-stats{display:flex;justify-content:space-between}.news-full .heart{padding:12px 10px;min-width:40px;min-height:34px;font-family:inherit;font-weight:700;font-size:16px;border:0;background-color:transparent;background-repeat:no-repeat;background-position:12px;cursor:pointer}.heart .likes-number{margin-left:24px;line-height:14px}.news-full time{margin:14px 12px 8px 0}.comment-list li,.news-full p{font-size:14px;line-height:24px}.news-full p{margin:0 12px 16px}.comment-feed h2{margin-top:0;margin-bottom:12px}.comment-list{margin:0 0 12px;padding:0;list-style:none;counter-reset:comments}.comment-list li{margin-bottom:6px;padding:10px 12px;min-height:36px}.comment-list .user-comment{position:relative;display:flex}.comment-list .user-comment::before{counter-increment:comments;content:\"#\" counter(comments);padding-right:12px;margin-right:12px;border-right:1px solid;font-weight:700}.comment-list .user-comment::after{position:absolute;content:\"\";width:0;height:0;bottom:0;left:-8px;border:4px solid;border-left-color:transparent;border-top-color:transparent}.dark-theme .header-logo{filter:invert(1) hue-rotate(180deg) brightness(2)}.light-theme{color:#333;background-color:#eae9f2}.light-theme .page-header{background-color:#fff;box-shadow:0 2px 2px rgba(0,0,0,.2)}.light-theme .header-link{color:#6653d9}.light-theme .header-link::before{background-image:url(img\/arrow-back-light.svg);background-repeat:no-repeat;background-position:0 0}.light-theme .theme-button{color:#6653d9;border:1px solid #6653d9}.light-theme .theme-button::before{background-image:url(img\/moon-normal.svg)}.light-theme .theme-button:focus,.light-theme .theme-button:hover{color:#fff;background-color:#6653d9}.light-theme .menu:focus,.light-theme .theme-button:focus{outline-color:#b6aaff}.light-theme .theme-button:focus::before,.light-theme .theme-button:hover::before{background-image:url(img\/moon-hover.svg)}.light-theme .menu-open{background-color:#fff;background-image:url(img\/menu-open-light.svg)}.light-theme .menu-open:focus,.light-theme .menu-open:hover{background-color:#6653d9;background-image:url(img\/menu-open-dark.svg)}.light-theme .menu-close{background-color:#6653d9}.light-theme .main-menu a:focus,.light-theme .main-menu a:hover,.light-theme .menu-close:focus,.light-theme .menu-close:hover{background-color:#473c8d}.light-theme .main-menu{background-color:#6653d9;color:#fff}.light-theme .main-menu a:focus{outline-color:#b6aaff}.light-theme .news-view button{border:1px solid #6653d9;color:#6653d9}.light-theme .news-view .view-checked,.light-theme .news-view button:active,.light-theme .news-view button:focus,.light-theme .news-view button:hover{background-color:#6653d9;color:#fff}.light-theme .news-view button:focus{outline-color:#b6aaff}.light-theme .news-view .row-view:active::before,.light-theme .news-view .row-view:focus::before,.light-theme .news-view .row-view:hover::before{background-image:url(img\/rows-light-checked.svg)}.light-theme .news-view .tile-view:active::before,.light-theme .news-view .tile-view:focus::before,.light-theme .news-view .tile-view:hover::before{background-image:url(img\/tiles-light-checked.svg)}.light-theme .row-view::before{background-image:url(img\/rows-light.svg)}.light-theme .tile-view::before{background-image:url(img\/tiles-light.svg)}.light-theme .row-view.view-checked::before{background-image:url(img\/rows-light-checked.svg)}.light-theme .tile-view.view-checked::before{background-image:url(img\/tiles-light-checked.svg)}.light-theme .news-block,.light-theme .news-full{background-color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}.light-theme .news-block time,.light-theme .news-full time{color:#aaa}.light-theme .cookies-agreement{background-color:#fdeacd;box-shadow:0 -1px 4px rgba(0,0,0,.2)}.light-theme .button,.light-theme .page-footer{background-color:#6653d9;color:#fff}.light-theme .button:focus,.light-theme .button:not(:disabled):hover{background-color:#473c8d}.light-theme .button:focus{outline-color:#b6aaff}.light-theme .comment-form,.light-theme .subscription{background-color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}.light-theme .subscription-message{background-color:#6653d9;color:#eae9f2}.light-theme .subscription-message::before{background-image:url(img\/icon-ok-light.svg)}.light-theme .comment-label,.light-theme .subscription-label{color:#6653d9}.light-theme .comment-field,.light-theme .subscription-email{border:1px solid #eae9f2;color:#333}.light-theme .heart{color:#6653d9;background-image:url(img\/icon-heart-light.svg);opacity:.7}.light-theme .heart.added{background-image:url(img\/icon-heart-light-added.svg)}.page .heart:focus,.page .heart:hover{opacity:1}.light-theme .heart:focus{outline-color:#b6aaff}.light-theme .heart:active{opacity:1;background-image:url(img\/icon-heart-light-active.svg)}.light-theme .comment-label,.light-theme .comment-list li{background-color:#fff}.light-theme .user-comment::before{border-right-color:#eae9f2;color:#cdcdcd}.light-theme .user-comment::after{border-right-color:#fff;border-bottom-color:#fff}.light-theme .comment-field:focus{outline-color:#b6aaff}.dark-theme{color:#f2f2f2;background-color:#17161a}.dark-theme .page-header{background-color:#373540;box-shadow:0 2px 2px rgba(0,0,0,.6)}.dark-theme .header-link{color:#9484f2}.dark-theme .header-link::before{background-image:url(img\/arrow-back-dark.svg);background-repeat:no-repeat;background-position:0 0}.dark-theme .theme-button{color:#9484f2;border:1px solid #9484f2}.dark-theme .theme-button::before{background-image:url(img\/sun-normal.svg)}.dark-theme .theme-button:focus,.dark-theme .theme-button:hover{color:#17161a;background-color:#9484f2}.dark-theme .main-menu a:focus,.dark-theme .menu:focus,.dark-theme .news-view button:focus,.dark-theme .theme-button:focus{outline-color:#6653d9}.dark-theme .theme-button:focus::before,.dark-theme .theme-button:hover::before{background-image:url(img\/sun-hover.svg)}.dark-theme .menu-open{background-color:#373540;background-image:url(img\/menu-open-dark.svg)}.dark-theme .menu-open:focus,.dark-theme .menu-open:hover{background-color:#473c8d;background-image:url(img\/menu-open-dark.svg)}.dark-theme .menu-close{background-color:#473c8d}.dark-theme .main-menu a:focus,.dark-theme .main-menu a:hover,.dark-theme .menu-close:focus,.dark-theme .menu-close:hover{background-color:#6653d9}.dark-theme .main-menu{background-color:#473c8d;color:#f2f2f2}.dark-theme .news-view button{border:1px solid #9484f2;color:#9484f2}.dark-theme .news-view .view-checked,.dark-theme .news-view button:active,.dark-theme .news-view button:focus,.dark-theme .news-view button:hover{background-color:#9484f2;color:#17161a}.dark-theme .news-view .row-view:active::before,.dark-theme .news-view .row-view:focus::before,.dark-theme .news-view .row-view:hover::before{background-image:url(img\/rows-dark-checked.svg)}.dark-theme .news-view .tile-view:active::before,.dark-theme .news-view .tile-view:focus::before,.dark-theme .news-view .tile-view:hover::before{background-image:url(img\/tiles-dark-checked.svg)}.dark-theme .row-view::before{background-image:url(img\/rows-dark.svg)}.dark-theme .tile-view::before{background-image:url(img\/tiles-dark.svg)}.dark-theme .row-view.view-checked::before{background-image:url(img\/rows-dark-checked.svg)}.dark-theme .tile-view.view-checked::before{background-image:url(img\/tiles-dark-checked.svg)}.dark-theme .news-block,.dark-theme .news-full{background-color:#2a2930;box-shadow:0 1px 4px rgba(0,0,0,.6)}.dark-theme .news-block time,.dark-theme .news-full time{color:#888}.dark-theme .cookies-agreement{background-color:#473c8d;box-shadow:0 -1px 4px rgba(0,0,0,.6)}.dark-theme .button{background-color:#9484f2;color:#17161a}.dark-theme .button:focus{outline-color:#6653d9}.dark-theme .button:focus,.dark-theme .button:not(:disabled):hover{background-color:#b6aaff}.dark-theme .page-footer{background-color:#373540;color:#f2f2f2}.dark-theme .comment-form,.dark-theme .subscription{background-color:#2a2930;box-shadow:0 1px 4px rgba(0,0,0,.6)}.dark-theme .subscription-message{background-color:#9484f2;color:#17161a}.dark-theme .subscription-message::before{background-image:url(img\/icon-ok-dark.svg)}.dark-theme .comment-label,.dark-theme .subscription-label{color:#9484f2}.dark-theme .comment-label,.dark-theme .comment-list li{background-color:#2a2930}.dark-theme .comment-field,.dark-theme .subscription-email{border:1px solid #473c8d;color:#f2f2f2}.dark-theme .heart{color:#9484f2;background-image:url(img\/icon-heart-dark.svg);opacity:.7}.dark-theme .heart:focus{outline-color:#6653d9}.dark-theme .heart.added{background-image:url(img\/icon-heart-dark-added.svg)}.dark-theme .heart:active{opacity:1;background-image:url(img\/icon-heart-dark-active.svg)}.dark-theme .user-comment::before{border-right-color:#17161a;color:rgba(255,255,255,.3)}.dark-theme .user-comment::after{border-right-color:#2a2930;border-bottom-color:#2a2930}.dark-theme .comment-field:focus{outline-color:#6653d9}.tooltip-button{cursor:pointer;position:relative;padding:1px 8px;border:0;color:inherit;font:inherit}.tooltip-button::after{position:absolute;content:\"\";top:0;right:0;width:0;height:0;border:4px solid;border-left-color:transparent;border-bottom-color:transparent}.tooltip{z-index:2;display:none;flex-direction:row-reverse;position:fixed;max-width:256px;right:0;top:160px;border-radius:8px 0 0 8px}.opened{display:flex;animation:tooltip-opener 150ms}.close-button,.tooltip-text{display:flex;align-items:center;padding:10px}.close-button{min-height:64px;justify-content:center;width:30px;margin:0;padding:0;border-radius:8px 0 0 8px}.close-button span{display:inline-block;vertical-align:middle;transform:rotate(-90deg)}.comment-area{height:unset;resize:none;margin-bottom:10px;padding-top:4px;padding-bottom:4px;line-height:24px}.text-counter{display:inline-block;vertical-align:baseline;padding:7px 0;margin-right:auto}.comment-form.warning .comment-label{color:#f05b29}.comment-form.warning .comment-area{color:#f05b29;border-color:#f05b29}.comment-form.warning .comment-area:focus{outline-color:#f05b29}.comment-form.warning .char-counter{color:#f05b29;font-weight:700}.submit-button:disabled{opacity:.25}.light-theme .tooltip{background-color:#fff;box-shadow:0 0 16px rgba(0,0,0,.5)}.light-theme .tooltip-button{background-color:#f2f2f2}.light-theme .tooltip-button:focus,.light-theme .tooltip-button:hover{background-color:#6653d9;color:#fff;outline-color:#b6aaff}.tooltip-button:active{opacity:.6}.light-theme .tooltip-button::after{border-right-color:#6653d9;border-top-color:#6653d9}.dark-theme .tooltip{background-color:#2a2930;box-shadow:0 0 16px #000}.dark-theme .tooltip-button{background-color:#0a0910}.dark-theme .tooltip-button:focus,.dark-theme .tooltip-button:hover{outline-color:#6653d9;background-color:#b6aaff;color:#17161a}.dark-theme .tooltip-button::after{border-right-color:#b6aaff;border-top-color:#b6aaff}"});</script><footer class="page-footer page-footer--tiny"><div class="page-footer__inner"><p><a href="/docs/cookies">Cookies</a> ∙
<a href="/docs/privacy">Privacy</a> ∙
<a href="/docs/agreement">License Agreement</a> ∙
<a href="/docs/about">About</a> ∙
<a href="/contacts">Contacts</a> ∙
© HTML Academy OÜ, 2019−2026
</p><div class="page-footer__financial"><img src="https://assets.htmlacademy.org/img/visa-white.svg?cs=96e54ec8c587db9d4b1d8d328ffd87c2ebfd9555" alt="VISA" title="VISA" width="35" height="35"><img src="https://assets.htmlacademy.org/img/mastercard-horizontal.v2.svg" alt="Mastercard" title="Mastercard" width="35" height="35"></div></div></footer><div class="modal"><div class="modal__inner"><div class="modal__wrapper js-login hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Log in</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fjavascript-basics%2Fscrolling-and-operators%2Fscroll-page-onclick" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fjavascript-basics%2Fscrolling-and-operators%2Fscroll-page-onclick" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/login?redirect_url=%2Fcourses%2Fjavascript-basics%2Fscrolling-and-operators%2Fscroll-page-onclick" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aed39f25d30"><input type="hidden" name="csrf_value" value="3027c385df1527e688748192fe735b82"><div class="form__group"><label class="sr-only" for="login-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="login-email"></div><div class="form__group"><label class="sr-only" for="login-password">Password</label><input class="field field--text field--full-width ym-disable-keys" type="password" name="password" placeholder="Password" id="login-password"></div><input class="button button--full-width" type="submit" data-submit-text="Logging in…" value="Log in"></form><p class="modal__forgot-password"><a href="/recover" data-modal="open" data-value="recover">Forgot your password?</a></p><a class="modal__bottom-link" href="/signup" data-modal="open" data-value="register">Sign up</a></div><div class="modal__wrapper js-register hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Sign up</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fjavascript-basics%2Fscrolling-and-operators%2Fscroll-page-onclick" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fjavascript-basics%2Fscrolling-and-operators%2Fscroll-page-onclick" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/signup?redirect_url=%2Fcourses%2Fjavascript-basics%2Fscrolling-and-operators%2Fscroll-page-onclick" autocomplete="off" method="post"><input type="hidden" name="csrf_name" value="csrf69aed39f25d30"><input type="hidden" name="csrf_value" value="3027c385df1527e688748192fe735b82"><div class="form__group"><label class="sr-only" for="email">
Email
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="email" name="email" value="" id="email" required placeholder="Email"></div></div><div class="form__group"><label class="sr-only" for="password">
Password
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="password" name="password" value="" id="password" required placeholder="Password"></div></div><div class="form__group"><label class="checkbox"><input class="checkbox__input" type="checkbox" name="agreement" value="1" required><span class="checkbox__text"><span>By signing up, you agree to our <a href="/docs/agreement" target="_blank">License Agreement</a> and <a href="/docs/privacy" target="_blank">Privacy Policy</a>.</span></span></label></div><input class="button button--full-width" type="submit" data-submit-text="Signing up…" value="Sign up"></form><a class="modal__bottom-link" href="/login?redirect_url=%2Fcourses%2Fjavascript-basics%2Fscrolling-and-operators%2Fscroll-page-onclick" data-modal="open" data-value="login">Log in</a></div><div class="modal__wrapper modal__wrapper--no-btn-bottom js-recover hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Restore access</h4><p class="modal__text-accent">Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.</p><form class="modal__form form" action="/recover" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aed39f25d30"><input type="hidden" name="csrf_value" value="3027c385df1527e688748192fe735b82"><div class="form__group"><label class="sr-only" for="recovery-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="recovery-email"></div><script src='https://www.google.com/recaptcha/api.js'></script><div class="form__group"><div class="g-recaptcha" data-sitekey="6LetCTEqAAAAANROWtPzfC7Rfg9iIRiRt2k2FPn7"></div></div><input class="button button--full-width" type="submit" data-submit-text="Sending…" value="Send"></form><p class="modal__text">Forgot to connect your email to the profile? Email us and we’ll help.</p></div></div></div><script async src="https://assets.htmlacademy.org/js/general.v274.js" data-assets="https://assets.htmlacademy.org" data-require="toggle,navigation-courses,modal,form,nav"></script></body></html>