Announcement

Collapse
No announcement yet.

Anchor Tag Problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Anchor Tag Problem

    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

    #2
    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

    Code:
      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.
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


      #3
      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.

      Comment


        #4
        Cool. BTW, the "700" number is the 'speed' of the scroll. Adjust as desired.
        Bruce Golub
        Phosphor Media - "Your Success is our Business"

        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
        phosphormedia.com

        Comment


          #5
          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.

          Comment


            #6
            Is there another js error on the page?
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


              #7
              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.

              Comment


                #8
                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

                Bruce Golub
                Phosphor Media - "Your Success is our Business"

                Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                phosphormedia.com

                Comment


                  #9
                  Duly noted.

                  Comment

                  Working...
                  X