sws-gotop

A web components to display the button to scroll to the top of the page.

Demo

Demo

Usage

Place sws-gotop custom element.

<sws-gotop></sws-gotop>
<script type="module" src="sws-gotop.min.js" defer></script>

Set element's style etc... by css custom properties.

sws-gotop {
  --sws-gotop-position: fixed;
  --sws-gotop-size: 80px;
  --sws-gotop-aspect-ratio: 1;
  --sws-gotop-top: initial;
  --sws-gotop-left: initial;
  --sws-gotop-right: 50px;
  --sws-gotop-bottom: 100px;
  --sws-gotop-z-index: 1000;
  --sws-gotop-transition: opacity 0.3s, transform 0.3s;
  --sws-gotop-transform: translate3d(0, 50px, 0);
  --sws-gotop-fg-color: #fff;
  --sws-gotop-bg-color: #933;
  --sws-gotop-hover-opacity: 1;
  --sws-gotop-border-radius: 50%;
  --sws-gotop-border: 0 none;
  --sws-gotop-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  --sws-gotop-ripple-color: rgba(255, 255, 255, 0.5);
  --sws-gotop-ripple-border-radius: 50%;
  --sws-gotop-arrow-color: #fff;
  --sws-gotop-arrow-weight: 2px;
  --sws-gotop-arrow-scale: 1;
  --sws-gotop-pointer-focus-outline-width: 0;
  --sws-gotop-svg-max-width: 100%;
  --sws-gotop-image-object-fit: cover;
}

CSS custom properties

| css custom property name | content | defaults | |:------------------------------------------|:-------------------------------------------|:---------------------------------| | --sws-gotop-position | Position | fixed | | --sws-gotop-size | Horizontal size (width) | 80px | | --sws-gotop-aspect-ratio | Aspect ratio size | 1 | | --sws-gotop-top | Position from the top edge of the window | initial | | --sws-gotop-left | Position from the left edge of the window | initial | | --sws-gotop-right | Position from the right edge of the window | 50px | | --sws-gotop-bottom | Position from the bottom of window | 100px | | --sws-gotop-z-index | Value of z-index | 1000 | | --sws-gotop-transition | Show in transition | opacity 0.3s, transform 0.3s | | --sws-gotop-transform | Move button position before show in | translate3d(0, 50px, 0) | | --sws-gotop-fg-color | Foreground color | #fff | | --sws-gotop-bg-color | Background color | #933 | | --sws-gotop-hover-opacity | Transparency with mouse over | 1 | | --sws-gotop-border-radius | Border radius size | 50% | | --sws-gotop-border | Border style | 0 none | | --sws-gotop-shadow | Button shadow style | 2px 2px 5px rgba(0, 0, 0, 0.2) | | --sws-gotop-ripple-color | Ripple effect color | rgba(255, 255, 255, 0.5) | | --sws-gotop-ripple-border-radius | Ripple border radius size | 50% | | --sws-gotop-arrow-color | Arrow color | #fff | | --sws-gotop-arrow-weight | Thickness of the arrow | 2px | | --sws-gotop-arrow-scale | Scale size of the arrow | 1 | | --sws-gotop-pointer-focus-outline-width | Mouse pointer Fouced outline width | 0 | | --sws-gotop-svg-max-width | Arrow svg image max width | 100% | | --sws-gotop-image-object-fit | Image object fit property | cover |

Options

<sws-gotop
  boundary="200"
  src="button.png"
  media="(max-width: 768px)"
  label="Go to page top"
  index="0"
></sws-gotop>

| option name | content | defaults | |:------------|:----------------------------------|:---------------------| | boundary | Scroll position to start display | 200 | | src | Image path | '' | | media | Mobile device judgment width | (max-width: 768px) | | label | aria-label text | '' | | index | tabindex value | 0 | | mode | Select inner content, svg or slot | svg |

License

MIT

Author

inotom