Anchor element not working in firefox and chrome

前端 未结 13 950
甜味超标
甜味超标 2020-12-20 17:36

I have a hyperlink on an image on my client site. It\'s working in IE but when I open the same page in Chrome/Mozilla it\'s not showing the anchor pointer and nothing happen

相关标签:
13条回答
  • 2020-12-20 18:10

    Another possible issue that can happen with this (although it's probably not the case here) is that you could have altered the css pointer declaration for the a tag eg.

    a {
        cursor: default;
    }
    

    If that is the case though, hover effects and clicking on the link should still work.

    0 讨论(0)
  • 2020-12-20 18:13

    What I found that worked for me regarding the same issue with Chrome *only, was to NOT enclose the anchor id within a block-level element BUT enclose the call-out.

    ex.

        <body>
        <a id="top" name="top"> </a>
        <p>...</p>
        <p><a href="#top">Back to Top</a></p>
        </body>
        <!-- /end ex. -->
    

    Hope this helps :) works in all browsers.

    -Ben

    0 讨论(0)
  • 2020-12-20 18:13

    I have found that sometimes you can mistakenly have another element with the same ID. In my case, it was an option tag, which cannot be moved into view. As such, I would recommend you try $('#yourid') to see if there are any tags unexpectedly with the same ID.

    0 讨论(0)
  • 2020-12-20 18:15

    do not put the # character at anchor, only in the link

    Correct <a name="top">[top of page]</a> <a link="#top">[link]</a>
    
    Incorrect <a name="#top">[top of page]</a> <a link="top">[link]</a>
    
    0 讨论(0)
  • 2020-12-20 18:15

    It looks silly but I once had the same issue .I just placed anchor links in an existing page as a part of enhancement.Strangely the links are clickable in IE but not in chrome/firefox.

    Upon looking carefully , I found there is an existing script that removes the link of anchor tag for print functionality. The added anchor tags are part of the same page and hence had this problem. I added if condition with ids of newly added anchors so that they will skip the functionality added to remove the links of anchor.

    0 讨论(0)
  • 2020-12-20 18:17

    For Firefox, apply this script in the HEAD section of the page.

    <script>
        $(document).ready(function(){
            var h = window.location.hash;
            if (h) {
                var headerH = $('#navigationMenu').outerHeight();
                $('html, body').stop().animate({
                    scrollTop : $(h).offset().top - headerH + "px"
                }, 1200, 'easeInOutExpo');
    
                event.preventDefault();
            }
        });
    </script>
    

    For Chrome, use the following in the HEAD section of your page.

    <script>
        $(document).ready(function () {
            var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
            if (window.location.hash && isChrome) {
                setTimeout(function () {
                    var hash = window.location.hash;
                    window.location.hash = "";
                    window.location.hash = hash;
                }, 300);
            }
        });
    </script>
    

    Just Copy and Paste BOTH the scripts in the HEAD section of you page. It worked for me! :)

    0 讨论(0)
提交回复
热议问题