<a href="#bum" id="fancy-hat">Go to Bottom</a>

<button class="whoah">Click me</button>

<a href="#fancy-hat" id="bum">Go to top</a>
@media (prefers-reduced-motion: reduce) {
  :root {
    --nomotion: none;
html {
  scroll-behavior: var(--nomotion, smooth);
.whoah {
  animation: var(--nomotion, rotate 1s infinite alternate);
  margin: 3em auto;
  display: block;
  border: 2px solid firebrick;
  color: black;
  background: hotpink;
  border-radius: 10px;  
@keyframes rotate {
  from {transform: scale(.5);}
  to {transform: scale(3);}

/* Design is my passion */
body {
  background: linear-gradient(peachpuff , firebrick);
  display: inline-block;
  margin-top: 500vh;
a {
  color: #fff;
  background: #000;
  padding: 5px 10px;
  text-decoration: none;
  font-family: sans-serif;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.