I'm working on designing website but facing a issue that href # tags are not working in chrome but working in firefox

<ul class="navigation" style="margin-top: 75px;">
   <li><a class="scroll-to" href="#section-1">Home</a></li>
   <li><a class="scroll-to" href="#section-2">About Us</a></li>
   <li><a class="scroll-to" href="#section-4">Products</a></li>
   <li><a class="scroll-to" href="#section-5">Clients</a></li>
   <li><a class="scroll-to" href="#section-6">Team</a></li>
   <li><a class="scroll-to" href="#section-7">Contact Us</a></li>
</ul>


<section id="section-1" class="banner-container color-light center nav-trigger">

I'm working on designing website but facing a issue that href # tags are not working in chrome but working in firefox

<ul class="navigation" style="margin-top: 75px;">
   <li><a class="scroll-to" href="#section-1">Home</a></li>
   <li><a class="scroll-to" href="#section-2">About Us</a></li>
   <li><a class="scroll-to" href="#section-4">Products</a></li>
   <li><a class="scroll-to" href="#section-5">Clients</a></li>
   <li><a class="scroll-to" href="#section-6">Team</a></li>
   <li><a class="scroll-to" href="#section-7">Contact Us</a></li>
</ul>


<section id="section-1" class="banner-container color-light center nav-trigger">

I am not sure where its going wrong

• javascript
• jquery
• html
• google-chrome

• not working mean what exactly it suppose to do? – brk Commented Nov 27, 2017 at 17:55
• @brkwhen I click on section 1 link it should navigate to the selected secion but it doesnt do it chrome but in other browsers it does. – Jigna Jain Commented Nov 27, 2017 at 17:57
• Must be something else going wrong probably related to some javascript. This is extremely basic functionality in all browsers – charlietfl Commented Nov 27, 2017 at 17:58
• @charlietfl I tried checking it in Developer Tools but still no luck – Jigna Jain Commented Nov 27, 2017 at 17:59
• Are you sure Chrome doesn't simply have a larger window, so that section-1 is visible when you click the link? Then it wouldn't scroll. – Mr Lister Commented Nov 27, 2017 at 18:03

5 Answers 5

The following works fine for me in Chrome 62. Are you closing your section tag? Are you sure there is enough height that it would actually scroll?

section {
   padding: 100px;
   border: 1px solid blue;
}

<ul>
    <li><a href="#section-1">Home</a></li>
    <li><a href="#section-2">About Us</a></li>
    <li><a href="#section-4">Products</a></li>
    <li><a href="#section-5">Clients</a></li>
    <li><a href="#section-6">Team</a></li>
    <li><a href="#section-7">Contact Us</a></li>
</ul>
<section id="section-1">Home</section>
<section id="section-2">About Us</section>
<section id="section-4">Products</section>
<section id="section-5">Clients</section>
<section id="section-6">Team</section>
<section id="section-7">Contact Us</section>

You can try follow this. https://www.gregoryvarghese./chrome-anchor-link-not-working-fix/

$(function() {
   $('a[href*="#"]:not([href="#"])').click(function() {
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
       var target = $(this.hash);
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
       if (target.length) {
         $('html, body').animate({
           scrollTop: target.offset().top
         }, 1000);
         return false;
       }
     }
   });
 });

Make sure you have enough height for each div so that page can scroll. Without page scroll you can't see changes, because nothing wrong with your code.

<ul>
   <li><a href="#section-1">Home</a></li>
   <li><a href="#section-2">About Us</a></li>
   <li><a href="#section-4">Products</a></li>
   <li><a href="#section-5">Clients</a></li>
   <li><a href="#section-6">Team</a></li>
   <li><a href="#section-7">Contact Us</a></li>
</ul>
<section style="height:500px" id="section-1">Home</section>
<section style="height:500px" id="section-2">About Us</section>
<section style="height:500px" id="section-4">Products</section>
<section style="height:500px" id="section-5">Clients</section>
<section style="height:500px" id="section-6">Team</section>
<section style="height:500px" id="section-7">Contact Us</section>

I guess its a bug in certain versions of Chrome, this workaround did the trick for me, good luck! -

$(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);
    }
});

For me, it was the href that redirected to pages with hashtags, so I did this workaround:

$('body').on('click', 'a[href*="#"]:not([href="#"])', function(e) {
    if($(this).attr('href').indexOf('http') > -1 && /chrome/i.test( navigator.userAgent) ){
        e.preventDefault();
        window.location.href = $(this).attr('href');
        window.location.reload();
        return false;
    }
});