Get color from top element of viewport

Question

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. https://i.ibb.co/4SrqGQW/Screenshot-20191018-114922.jpg

My current code

// ==UserScript==
// @name          bottom button 
// @namespace     bottom
// @description   go to bottom
// @include       *://*/*
// @grant         GM_addStyle 
// @noframes
// ==/UserScript==
var btmbtn = document.createElement("div");
btmbtn.innerHTML = '<div id="bottom1">▼</div>';
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;
} 
` );

Answer 1

You can easily access the first DOM object inside body using var first = document.body.children[0]; and access it's styling properties. But the thing to remember is that this may not always work on your case. For example:- If you have a container or any other element at the top but isn't on the top of the body in code, you will only get the property of the element just after the body starts in code not the first element of the viewport itself. You can have a look at this