<script lang="ts">

  // trying something...
  // const element = document.getElementById("bottom-half");
  export let element;

  // is this too JS for me?
  const scrollTo= () => {
    element.scrollIntoView({behavior: "smooth"});
    console.log('supposed to scroll');
    // Maybe eventually i can do this in a more svelte way, on:scroll={someEvent} ... whatever
  };

</script>

<!-- <svelte:window bind:scrollY={y}/> -->


<!-- wait actually i don't want this... -->
<!-- <svelte:window on:scroll={handleOnScroll} /> --> 

<!-- a div instead? -->
<!-- <button>Login</button> -->
<div class="to-login" on:click={scrollTo}>Login</div>


<style>
  .to-login{
    display: inline-block;
    /* color: bisque; */
    color: blue;
    margin-left: 10px;
  }
  .to-login:hover{
    font-weight: bold;
    color: black;
    cursor: pointer;
  }

</style>