docs: readme corrections with bottom example

Author: taocode

README.md

@@ -1,18 +1,20 @@
-# Svelte-Headroom
+# @taocode/Svelte-Headroom
 
 **Hide your header and footer until you need it!**
 
-Svelte Headroom is a [Svelte](https://svelte.dev) component to hide or show your header on scroll, adapted from [collardeau/svelte-headroom](https://github.com/collardeau/svelte-headroom), inspired by [headroom.js](https://wicky.nillia.ms/headroom.js/)
+Svelte Headroom is a [Svelte](https://svelte.dev) component to hide or show your header and footer on scroll, adapted from [collardeau/svelte-headroom](https://github.com/collardeau/svelte-headroom), inspired by [headroom.js](https://wicky.nillia.ms/headroom.js/).
 
 `@taocode/svelte-headroom` has **no dependencies**.
 
 ## Demo
 
-[Svelte REPL](https://svelte.dev/repl/44cafd471bcf497080e12ed3bee80986?version=3.53.1) or check the source: `src/routes/+page.svelte`
+[Svelte REPL](https://svelte.dev/repl/44cafd471bcf497080e12ed3bee80986?version=3.53.1)
+
+[Grab a copy](https://github.com/taocode/svelte-headroom) and play with it directly. Run `pnpm dev` (or yarn, npm equivalents) and edit the demo test page: `src/routes/+page.svelte`
 
 ## Install
 
-`npm install @taocode/svelte-headroom`
+`pnpm install -D @taocode/svelte-headroom`
 
 ## Usage
 
@@ -29,7 +31,7 @@ Svelte Headroom is a [Svelte](https://svelte.dev) component to hide or show your
 
 ## Props
 
-### `tolerance` number
+### `tolerance` number {#tolerance}
 
 The number of pixels that need to be scrolled in either direction for the effect to occur. This is useful if you want the user to be able to scroll slowly and not change the header position. Default: `0`.
 
@@ -40,7 +42,7 @@ The number of pixels that need to be scrolled in either direction for the effect
 </Headroom>
 
 ```
-### `offsetTop` number
+### `offsetTop` number {#offsetTop}
 
 The number of pixels from the top of the page before the effect is allowed to occur; *controls:* `class:atTop` (useful with hideAtTop, showAtTop). Default: `2`.
 
@@ -52,7 +54,7 @@ The number of pixels from the top of the page before the effect is allowed to oc
 
 ```
 
-### `offsetBottom` number
+### `offsetBottom` number {#offsetBottom}
 
 The number of pixels from bottom to be considered at the bottom; *controls* `class:atBottom` (useful with hideAtBottom, showAtBottom). Default: `2`.
 
@@ -64,7 +66,7 @@ The number of pixels from bottom to be considered at the bottom; *controls* `cla
 
 ```
 
-### `duration` string
+### `duration` string {#duration}
 
 The duration of the sliding effect. The value is passed on as a [CSS Transition Duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration). Default: `"300ms"`.
 
@@ -76,7 +78,7 @@ The duration of the sliding effect. The value is passed on as a [CSS Transition
 
 ```
 
-### `easing` string
+### `easing` string {#easing}
 
 The timing function (easing) of the sliding effect. The value is passed on as a [CSS Transition Timing Function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function). Default: `"linear"`.
 
@@ -88,31 +90,74 @@ The timing function (easing) of the sliding effect. The value is passed on as a
 
 ```
 
-### `bottom` boolean
+### `bottom` boolean {#bottom}
 
 If this is to be pinned to the bottom, like a return to top button. Default: `false`.
 
+*Note:* you'll need to wrap a bottom pinned Headroom to use it because
+it isn't 100% wide to avoid covering links and breaking the UI a bit.
+You can play with heights and widths and different positioning; *see below for my favorite .totop-wrap*
+
 ```html
 
-<Headroom bottom>
-  <!-- pinned to the bottom -->
-</Headroom>
+<div class="totop-wrap">
+  <Headroom bottom>
+    <!-- pinned to the bottom -->
+  </Headroom>
+</div>
 
 ```
 
-### `(show|hide)At(Top|Bottom)` boolean
+### `(show|hide)At(Top|Bottom)` boolean {#ats}
 
 If this is to be pinned to the bottom, like a return to top button. Default: `false`.
 
+*Note:* bottom detection fails on [SVELTE REPL]().
+
 ```html
 
 <Headroom showAtBottom>
   <!-- my header that will always show when at bottom -->
 </Headroom>
 
-<Headroom bottom hideAtTop showAtBottom tolerance={20} shim={50}>
-  <!-- footer for 'to top' button -->
-</Headroom>
+<div class="totop-wrap">
+  <Headroom bottom hideAtTop showAtBottom tolerance={20} shim={50}>
+    <!-- footer for 'to top' button -->
+    <button 
+      class="totop" 
+      on:click={()=> window.scroll(0,0)}
+      > 
+      <span class="caret">^</span> <span>To Top</span>
+    </button>
+  </Headroom>
+</div>
+
+<style>
+  .totop-wrap {
+    max-width: 90ch;
+    margin: 0 auto;
+    display: flex;
+    justify-content: end;
+  }
+  .totop {
+    margin: 2em;
+    background: hsl(29, 100%, 40%);
+    color: white;
+    border: 0;
+    padding: 0.5rem;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-transform: uppercase;
+    font-size: 0.667em;
+    line-height: 1.5rem;
+  }
+  .caret {
+    font-size: 4em;
+    padding-top: 0.5rem;
+  }
+</style>
 
 ```
 
@@ -129,4 +174,4 @@ A `svelte-headroom` component emits two events: `pin` and `unpin`.
 </Headroom>
 ```
 
-Happy Coding!
+## Happy Coding! {#happy}