jQuery: resetting scroll bar on clicking a button

user_7321290 0
Viewed 219

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>
frontend jquery javascript
1 Answers

In your code it is missing where you are calling the resetScrollpoint() function but but at first sight 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());
}

Explanations Sorry for my English!

Your first aproach are right

<a class="btn" role="button" href="#faqs">FAQs</a>

That get the #faqs element scrolling to top, but the top is 0 and you have a fixed #header element so you need to scroll to top + #header height

Your second aproach with onclick="resetScrollpoint()" are also right but

  1. Is ambiguos because on the one hand you tell the interpreter to execute href="#faqs" but on the other hand you tell to interpreter to execute resetScrollpoint(). Solution: with href="javascript:void(0)" you tell to interpreter to ignore the default href action

  2. The logical inside your function resetScrollpoint() was wrong because you need to know how many pixels you need to scroll.

Solution: you tell to the function what is the element that you need (passing it as a parameter) resetScrollpoint('#faqs'),

with jQuery(selector).offset().top you find the position of your element received by the parameter selector (how many pixels from the top) and substract the height of #header element because otherwise the scrolling it would be too upstair

user_29510510
Related