@inotom/sws-gotop

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