jQuery: resetting scroll bar on clicking a button-CodePudding

This is a peculiar issue faced when creating internal links on a WordPress page. There are 3 CTA buttons on the page that when clicked do jump to the respective sections on the same page. However, it is jumping past the section exactly by the height of the header of the page. As a solution, I added a function to each of these buttons so that it sets the scrollbar to pull the bar backward. Below is the code that isn't working. Could you please suggest some changes to make it work?

<h4>Connect with our Team</h4>
<p>Does your order need extra care? You’re in the right place. For special requests, help collecting recipient addresses, or to add corporate branding to your gifts, our Gift Concierge experts can help.</p>
<p><a class="btn" role="button" href="#faqs">FAQs</a> <a class="btn" role="button" href="#let-us-chat">Schedule a Call</a> <a class="btn" role="button" href="#submit-questions">Submit a Question</a></p>
<p>&nbsp;</p>
<h5 id="faqs">FAQs</h5>
<p>Some questions have easy answers. Whether you want to know <a href="https://help.packedwithpurpose.gifts/how-much-does-shipping-cost" target="_blank" rel="noopener">shipping prices</a>, <a href="https://help.packedwithpurpose.gifts/how-long-do-gifts-take-to-be-delivered" target="_blank" rel="noopener">how soon your gifts will ship</a>, or <a href="https://help.packedwithpurpose.gifts/how-do-i-add-my-logo-to-my-gift-boxes">how to add a company logo</a>, browse our <a href="https://packedwithpurpose.gifts/faq/">FAQ</a>s.</p>
<p>&nbsp;</p>
<h5 id="let-us-chat">Let's Chat</h5>
<p>Prefer to schedule a call? Meet with a member of our Gift Concierge team at a time most convenient for you:</p>
<ul>
    <li>Orders under 200 gifts, <a href="https://meetings.hubspot.com/kim67/gift-concierge">schedule here </a></li>
    <li>Orders of 200 or more gifts, <a href="https://meetings.hubspot.com/kim67/high-volume-gift-concierge">schedule here</a></li>
</ul>
<p>&nbsp;</p>
<h5 id="submit-questions">Submit questions</h5>
<p>Ask us anything below. A member of our team will get back to you within one business day.</p>
<p>
<style>
@media only screen and (max-width: 576px)  {
.page-id-2765 .btn {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.1rem;
}
}

@media only screen and (min-width: 750px) and (max-width: 910px) {
.page-id-2765 .btn {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.1rem;
}
}
</style>
</p>
<p><script>
function resetScrollpoint() {
 console.log("Hello Pramod");
 window.scroll(0,$(".col-nav").css('height'));
}
</script></p>

CodePudding user response：

In your code it is missing where you are calling the resetScrollpoint() function but but at first sight ...

In window.scroll(x-coord, y-coord) the x-coord and y-coord must be numeric but your $(".col-nav").css('height') return a string with pixeles eg: '100px' you must try:

instead of:

$(".col-nav").css('height')

you must do:

$(".col-nav").height()

parseInt($(".col-nav").css('height'))

UPDATE EDIT After your last comment you can do this:

<a class="btn" role="button" href="javascript:void(0)" onclick="resetScrollpoint('#faqs')">FAQs</a>
<a class="btn" role="button" href="javascript:void(0)" onclick="resetScrollpoint('#let-us-chat')">Schedule a Call</a>
<a class="btn" role="button" href="javascript:void(0)" onclick="resetScrollpoint('#submit-questions')">Submit a Question</a>

And your function change to this:

resetScrollpoint(selector){
    if(!selector) return;
    window.scroll(0,jQuery(selector).offset().top - jQuery('#header').height());
}