Anchor Tag Problem

[greggc]

Duly noted.

[Bruce - PhosphorMedia]

Oh, here's the thing...before placing javascript into a template, run it through a javascript validator. My fav is:

https://esprima.org/demo/validate.html

[greggc]

Son of a gun. I had a unnecessary semi-colon at the end of }). Thanks again for pointing me to where to look. Just wish I had found it 5 hours ago.

[Bruce - PhosphorMedia]

Is there another js error on the page?

[greggc]

Well, I can't get it to work. I found the function for for the theme I am using in Iron & Wool;

// ---- Allow Named Anchors With A Class Of "smoothscroll" To Work Without Full URL ---- //

$('a[href^="\#"].smoothscroll').on('click', function (e) {

e.preventDefault();

var target = this.href.substr(this.href.indexOf('#')),

target = $(target);



if (target.offset().top > windowHeight / 2) {

var offset = $('#js-header').outerHeight();

}

else {

var offset = 10;

};



scrollToDiv(target, offset);

});

Using this as my link: <a href="#review" class="smoothscroll">Text to be shown on screen</a>

This is my target: <div id="review">.......</div>

Result is still back to storefront. Either I am writing these anchors wrong or it might have something to do with with my link structure. I don't know.

[Bruce - PhosphorMedia]

Cool. BTW, the "700" number is the 'speed' of the scroll. Adjust as desired.

[greggc]

Thanks Bruce. Actually I am wanting to use this function for your Easy Review module to link the summary display template to the product display template at the bottom of the product description at the end of the product page.

[Bruce - PhosphorMedia]

To use "a name" anchors, the link has to point to the FULL url, i.e., /this-url.html#thisanchor.

However, in a modern site, you should use JS/jquery. Most readythemes have a built in function to do this, but if you don't and have jQuery loaded add

  let scroll_link = $('.scrollToo');  
  scroll_link.click(function(e){
      e.preventDefault();
      let url = $('body').find($(this).attr('href')).offset().top;
      $('html, body').animate({
        scrollTop : url
      },700);

then just use add class="scrollToo" to the link.

[greggc]

I am trying to place anchor tags on the product page in order to jump to a specific location within the product display layout.
Using... <a name="example"></a> as the anchor and <a href="#example">Click here</a> as the link to the anchor.
However, when the link is clicked it takes me back to the storefront instead of the anchor on the page.
I admit I am no coder, but can anyone see what is wrong with the above or is there abetter way to accomplish this.
Thanks
Greg