title: Scroll To Bottom Of Page On Click On Header - Only CSS
body: <p>I have a header (which is an image) that spans across the entire screen.
  I want the page to scroll down (smoothly..) whenever I click on the header, to a different element.</p>
  
  <p>The thing is I'm trying to accomplish this only using CSS, so I could have better smartphone experience.
  I've looked at several tutorials but they all seem to work using an external fixed navigation bar.</p>
  
  <p>I noticed there is a new psuedo-class :has() which picks the parent and might be very useful. Is it supported yet by browsers?</p>
  
  <p>Thank you!</p>
  
  <p>Code structure, more or less:</p>
  
  <pre><code>&lt;body&gt;
      &lt;img src="foobar.jpg" id="header" /&gt; &lt;!-- Onclick, scroll down to div --&gt;
      &lt;div id="SecondElement"&gt;
          All sorts of information
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>