|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| | | | |
| − | <div style='background:#6B3C42;'><span>a</span></div>
| |
| − | <div style='background:#719E77;'><span>b</span></div>
| |
| − | <div style='background:#EFCE89;'><span>c</span></div>
| |
| − | <div style='background:#DED3A6;'><span>d</span></div>
| |
| − | <div style='background:#C39B8F;'><span>e</span></div>
| |
| − | <a class='down-button' href="#">Down</a>
| |
| − | <a class='up-button' href="#">Up</a>
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | body {
| |
| − | height: 100%;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | div,
| |
| − | a.dole,
| |
| − | a.gore {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .down-button,
| |
| − | .up-button {
| |
| − | display: inline-block;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 100px;
| |
| − | background: orange;
| |
| − | padding: 5px;
| |
| − | text-decoration: none;
| |
| − | color: #000;
| |
| − | border-radius: 5px;
| |
| − | margin-top: 10px;
| |
| − | border: 2px solid brown;
| |
| − | box-shadow: 1px 1px 5px #000;
| |
| − | }
| |
| − |
| |
| − | span {
| |
| − | display: inline-block;
| |
| − | padding: 10px 15px;
| |
| − | background: #F0AC1E;
| |
| − | box-shadow: 1px 1px 5px #000;
| |
| − | }
| |
| − |
| |
| − | .up-button {
| |
| − | left: 170px;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | var wHeight = $(window).height();
| |
| − | var distance = 0;
| |
| − |
| |
| − | $('div').height(wHeight);
| |
| − | $('div, a').show();
| |
| − |
| |
| − | $('a').on('click', function(event) {
| |
| − | event.preventDefault();
| |
| − | });
| |
| − |
| |
| − | $('.down-button').on('click', function() {
| |
| − | distance = $(window).scrollTop();
| |
| − | $("html, body").animate({
| |
| − | scrollTop: distance + wHeight
| |
| − | }, 600);
| |
| − | });
| |
| − |
| |
| − | $('.up-button').on('click', function() {
| |
| − | distance = $(window).scrollTop();
| |
| − | $("html, body").animate({
| |
| − | scrollTop: distance - wHeight
| |
| − | }, 600);
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | </html>
| |
