Button to scroll to a specific location on the page

Hi,
I have two ‘Contact me’ buttons on my website. At the moment one would open an email app, the other just linking to my contact page.

However I would like them to go to my contact page and scroll to where the contact form is, because there is also a pricelist on top of that page. See here: https://idophotographydungarvan.ie/wedding-photography-prices/

Could you help me achieve that, please?

Hi @pablo102,

Thanks for reaching out.

You’ll have to add the section ID(where the form is) to the URL of the button. Example.

<a href="https://idophotographydungarvan.ie/wedding-photography-prices/#x-section-4">Contact Us</a>

Your form is in the 4th section which has the ID of x-section-4.

Thanks!

Would this work for links from different pages?
If I link to this “https://idophotographydungarvan.ie/wedding-photography-prices/#x-section-4” from ‘About Me’ page it’s being replaced with “https://idophotographydungarvan.ie/about-me-is-it-really/#x-section-4

Also, it doesn’t seem to be precise, depending on the screen/window size it jumps to different location on the page, but not exactly to section 4

Hello There,

Adding #x-section-4 as the href of the “Contact Me” button should be enough so that it will scroll to the correct section. I have investigated and I found out that NextGen Gallery Pro is generating a JS error on the page which has messed with the links as well. Please temporarily disable this plugin and test your button links again.

Please let us know how it goes.

Could you direct me where to find this error so I could then inform NextGen team about this?

Hello There,

This is the error generated by NextGen:

JQMIGRATE: Migrate is installed, version 1.4.1
6custom.min.js?ver=4.9.8:1 Uncaught TypeError: Cannot read property 'target' of undefined
    at HTMLAnchorElement.e (custom.min.js?ver=4.9.8:1)
    at t.value (pressure.min.js?ver=4.9.8:1)
    at t.value (pressure.min.js?ver=4.9.8:1)
    at t.value (pressure.min.js?ver=4.9.8:1)
e @ custom.min.js?ver=4.9.8:1
value @ pressure.min.js?ver=4.9.8:1
value @ pressure.min.js?ver=4.9.8:1
value @ pressure.min.js?ver=4.9.8:100:

And please do not add this code in the custom JS section:

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
 fbq('init', '1444008845916095'); 
fbq('track', 'PageView');
</script>
<noscript>
 <img height="1" width="1" 
src="https://www.facebook.com/tr?id=1444008845916095&ev=PageView
&noscript=1"/>
</noscript>
//<!-- End Facebook Pixel Code -->
<!-- Google Code for Wedding Enquiries Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
  /* <![CDATA[ */
  goog_snippet_vars = function() {
    var w = window;
    w.google_conversion_id = 1016287835;
    w.google_conversion_label = "9IC9CNDQgW0Q26TN5AM";
    w.google_remarketing_only = false;
  }
  // DO NOT CHANGE THE CODE BELOW.
  goog_report_conversion = function(url) {
    goog_snippet_vars();
    window.google_conversion_format = "3";
    var opt = new Object();
    opt.onload_callback = function() {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  }
  var conv_handler = window['google_trackConversion'];
  if (typeof(conv_handler) == 'function') {
    conv_handler(opt);
  }
}
/* ]]> */
</script>
<script type="text/javascript"
  src="//www.googleadservices.com/pagead/conversion_async.js">
</script>

It is best that you install “Insert Headers and Footers” plugin (https://wordpress.org/plugins/insert-headers-and-footers/) because the theme options > custom JS section will only accept javascript code. Any code wrapped with <script> will not be allowed which would create a JS error on the page as well.

Hope this helps.

On which page is this custom JS section with this code? Or was it already removed?

Hi @pablo102,

Have you fixed it? I’m not seeing any error at all nor those codes anymore. And it’s only normal to jump to a different location when you resize it, because the width changes so do the content height too, pushing other section. Same issue if the page is so slow that jumping happens even before other resources are loaded (like images) changing the height of the page once the loading is finished. And that’s what I observed on your page, it’s too long to load.

Thanks!

Hi,
I didn’t change anything,
maybe the plugin was updated.

So the problem here is slow loading page, but there is not much on it at all, only one main image, table and google comments, not much I could optimize here. Any suggestions?

Hello There,

For your site’s performance, please check out this knowledge base article:

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.