Margin Note — Back to Top Button
An editorial return cue that belongs in the page margin. Editorial publications, journals and long-form reading layouts.
An editorial return cue that belongs in the page margin. Editorial publications, journals and long-form reading layouts.
Design Preview
See the design above before trying the scroll interaction.
Live Demo
Press Try scrolling in the frame, or scroll inside it. Click the lower-right button to return to the top.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
<!-- TB-2050 / Margin Note | paste before closing body -->
<button class="backtop tb-btt-button w2050" type="button" aria-label="Back to top"><span class="w50bar"></span><span class="w50arrow">↗</span><span class="w50copy">To the top</span></button>
/* TB-2050 / Margin Note */
.backtop{box-sizing:border-box;position:fixed;z-index:50;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);text-align:center;transition:opacity .24s, transform .28s, visibility .24s}.backtop.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.backtop.w2055.is-visible{transform:translate(-50%,0)}.backtop:focus-visible{outline:3px solid #e7ab4c;outline-offset:4px}
.w2050{left:28px;bottom:29px;min-width:118px;height:45px;display:flex;align-items:center;gap:11px;padding:0 7px;background:transparent;color:#352e29;border:0;filter:drop-shadow(0 1px 1px #fff)}.w50bar{width:26px;height:1px;background:currentColor;transition:width .34s}.w50arrow{font:400 18px/1 Georgia,serif;transform:rotate(-45deg);display:inline-block}.w50copy{font:italic 15px Georgia,serif;white-space:nowrap}.w2050:hover .w50bar{width:45px}.w2050:hover .w50arrow{transform:rotate(-45deg) translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* POLISH PASS 2026-10-18: alignment, tactile size, emphasis & individual character */
.backtop{isolation:isolate;-webkit-tap-highlight-color:transparent;}
.backtop:focus-visible{outline:3px solid #f0af42;outline-offset:4px;}
@media(prefers-reduced-motion:reduce){.backtop,.backtop *{transition-duration:.01ms!important;animation-duration:.01ms!important}}
.w2050{left:clamp(22px,4vw,70px);bottom:clamp(29px,5vh,65px);min-width:142px;height:51px;padding:0 10px;gap:14px;color:#302d2a;background:#f8f4eddc;border-bottom:1px solid #a59989;filter:none;text-align:left;}
.w2050 .w50copy{white-space:nowrap;}
.w2050:hover{background:#e7ded1;transform:translateY(-3px)}
@media(max-width:650px){.w2050{left:18px;bottom:24px;min-width:128px;height:48px}}
(()=>{'use strict';const button=document.querySelector('.backtop');if(!button)return;const footerOnly=button.classList.contains('footer-backtop');const reduced=matchMedia('(prefers-reduced-motion: reduce)');let scheduled=false;function update(){scheduled=false;if(footerOnly)return;const shown=window.scrollY>160;button.classList.toggle('is-visible',shown);button.classList.toggle('is-hidden',!shown);button.tabIndex=shown?0:-1;button.setAttribute('aria-hidden',String(!shown));if(button.classList.contains('w2056')){const max=Math.max(1,document.documentElement.scrollHeight-innerHeight);button.style.setProperty('--progress',(Math.round(Math.min(100,scrollY/max*100)))+'%');}}function onScroll(){if(!scheduled){scheduled=true;requestAnimationFrame(update)}}button.addEventListener('click',()=>window.scrollTo({top:0,behavior:reduced.matches?'instant':'smooth'}));addEventListener('scroll',onScroll,{passive:true});addEventListener('resize',onScroll,{passive:true});update();})();How to Use
Insert the HTML button near the end of body, load CSS and JavaScript (defer), then verify scrolling and return-to-top on desktop and mobile.
Use Case
Editorial publications, journals and long-form reading layouts.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Check tap target and placement on mobile devices.
Browser: Test in your supported browsers.
Reduced Motion: CSS respects prefers-reduced-motion.