how to scroll to top when html element reduces in size?

Ask the community
,
2
  1. Add your HTML-Component onto your page.
  2. Add the following code into your HTML-Component…
<html>
  <head>
    <title></title>  
  </head>
  <body>
    <iframe id="iFrame"
      title="iFrame Example"
      width="300"
      height="200"
      src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
  </iframe>
   <button class="xxx", id="myButton", type="button", onclick="myFunction()">Zoom</button>
   
   <script>
      var element = document.getElementById("iFrame");
      console.log(element);
      console.log("Element-ID: ", element.id); 
      console.log("Element-Width: ", element.width);
      console.log("Element-Height: ", element.height);
      console.log("-------------------");
      console.log("Client-Width: ", element.clientWidth);
      console.log("textContent: ", element.textContent);
      console.log("Length: ", element.length);
      console.log("Text-Length: ", element.textLength);
      console.log("Scroll-Top: ", element.scrollTop);  
      console.log("Scroll-Left: ", element.scrollLeft);
      console.log("Scroll-Height: ", element.scrollHeight);  
      console.log("Scroll-Width: ", element.scrollWidth);
      console.log("Scroll-innerHTML: ", element.innerHTML);  
      console.log("Namespace-URI: ", element.namespaceURI);
      console.log("Local-Name: ", element.localName);
      console.log(element.height);

      function myFunction() {
        element.height = 600;
        element.width = 800;
        console.log("-------------------")
        console.log("Element-Width: ", element.width);
        console.log("Element-Height: ", element.height);
      }
    </script>  
  </body>
</html>
  1. Save the HTML-CODE.
  2. Publish your website.
  3. Inspect the whole code and learn from it.
    …
    Next steps would be…
  4. Establish communication between iFrame and your page
  5. Start DATA-TRANSFER between page and iFrame → dynamic actions.