title: Get color from top element of viewport
body: <p>I'm creating a button to go to bottom of page and i want button background color to same as 1st element which touch viewport. 
  Button is working but I'm unable to get top element color. 
  Check this image to understand what i need.
  <a href="https://i.ibb.co/4SrqGQW/Screenshot-20191018-114922.jpg" rel="nofollow noreferrer">https://i.ibb.co/4SrqGQW/Screenshot-20191018-114922.jpg</a></p>
  
  <p>My current code </p>
  
  <pre><code>// ==UserScript==
  // @name          bottom button 
  // @namespace     bottom
  // @description   go to bottom
  // @include       *://*/*
  // @grant         GM_addStyle 
  // @noframes
  // ==/UserScript==
  var btmbtn = document.createElement("div");
  btmbtn.innerHTML = '&lt;div id="bottom1"&gt;▼&lt;/div&gt;';
  btmbtn.onclick = function() {
      window.scrollTo(0,document.body.scrollHeight);
  };
  document.getElementsByTagName("html").item(0).appendChild(btmbtn);
  GM_addStyle ( `
  #bottom1  {
  background-color: blue;
  position: fixed;
  bottom: 10vw;
  right: 2vw;
  z-index: 9999999;
  border-radius: 100%;
  width: 10vw;
  height: 10vw;
  font-size: 5vw;
  text-align: center;
  line-height: 10vw;
  } 
  ` );
  </code></pre>