1

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;
} 
` );
Sam
  • 11
  • 3

1 Answers1

0

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

user651306
  • 3
  • 3
  • Thanks for answer, but it doesn't work most because many mobile sites use navigation bar which is top in viewport but not top in dom. Also linked answer is for scroll select i want only select top element (not scrolling) – Sam Oct 18 '19 at 10:30
  • That's what i have mentioned in the answer. – user651306 Oct 18 '19 at 11:33