I have a link on my hero image that scrolls to this section of my webpage. However, instead of stopping where I’d like it to it’s stopping past the heading and at the paragraph. I’ve tried targeting ONLY the heading and that just throws my page all out of whack. I’ve tried wrapping that section in a div and giving it the targeted ID, it still scrolls past it. How do I make it stop just like the image suggests?
This is my code:
<h1>Break Free From Tradition!</h1>
<p>Serve em' something different from<br>Sweet Dreams Bakery!</p>
<img src="angrybridehero.jpg" alt="Picture of a frusterated bride">
<ul class="hrobtn">
<li><a href="#scroll_here">Learn More
</a></li>
</ul>
<script>
$(document).on('click', 'a[href^="#"]', function(e) {
var id = $(this).attr('href');
var $id = $(id);
if ($id.length === 0) {
return;
}
e.preventDefault();
var pos = $id.offset().top;
$('body, html').animate({scrollTop: pos});
});
</script>
</section>
</head>
<body>
<section id="scroll_here">
<h2 class="firstheading">It's Your Wedding. Do it Your Way.</h2>
<p class="paragraph">However, good ol’ Aunt Vern is breathing down your neck about the most important part of the entire day. The CAKE! Okay. So maybe her name isn’t Aunt Vern, but she is in your family (or soon to be family) and you can just picture her now right?</p>
<img class="aunt-vern" src="auntvern.jpg" alt="picture of angry old lady">
<p class="sorry_vern">Sorry Vern...It's Not Your Day!</p>
<p class="paragraphintro"><b>Sweet Dreams Bakery is one like no other!</b> We're fully aware that your wedding's a unique and special day. Why not offer a uniuqe and special dessert? Yes, we all love cake but it's so overdone isn't it? Let's try something new!</p>
<p class="paragraphoffer"> Be sure to mention our site and get a 10% discount on anything you order! Use the code DOWNWITHCAKE on your order form to redeem this exclusive offer!</p>
</section>