function after_scroll_display_top() { "use strict"; try{ window.onscroll=function(){ console.log(window.pageYOffset); var scrollpoint=window.pageYOffset; var toTopElement=document.getElementById('toTop'); if(scrollpoint>100){toTopElement.style.display='block';} else{toTopElement.style.display='none';} return true; }; }catch(e){ return e.message; } } function main() { "use strict"; var result=after_scroll_display_top(); if(result!==true){ console.log(result); } } main();
<!doctype html> <body> <h1 class="header fixed">header</h1> <p class="contents" id="top">contents data</p> <p class="toTop" id="toTop"><a href="#top">toTop</a></p> <script src="js/03_if_scroll.js"></script> </body>
/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } .header{ background: #fc0; color: #fff; height: 50px; width: 100%; line-height: 50px; box-sizing: border-box; text-align: center; } .fixed{ position: fixed; top: 0; } .contents{ padding: 10px; padding-top:50px; text-align: center; height: 2000px; background: -webkit-gradient(linear, 0 0, 0 100%, from(#3fd950), color-stop(0.44,#fafa2e), to(#ff2035)); background: -webkit-linear-gradient(#3fd950 0%, #fafa2e 44%, #ff2035 100%); background: -moz-linear-gradient(#3fd950 0%, #fafa2e 44%, #ff2035 100%); background: -o-linear-gradient(#3fd950 0%, #fafa2e 44%, #ff2035 100%); background: linear-gradient(#3fd950 0%, #fafa2e 44%, #ff2035 100%); } .toTop{ position: fixed; right: 10px; bottom: 10px; height: 50px; width: 50px; text-decoration: none; display: none; } .toTop a{ display: block; background: #fc0; color: #fff; height: 50px; line-height: 50px; text-align: center; width: 50px; text-decoration: none; }