Scrolling is not working

Question

I have a problem on a site I’m creating, the scrolling effect I did on Js is not working properly, I put a console.log() to know if at least the event is running and is, the only problem is that scroll does not happen. If you can help me graduate.

MENU

<ul class="navbar-menu">
   <li><a class="scrolling" href="#home">MENU 1</a></li>
   <li><a class="scrolling" href="#portfolio">MENU 2</a></li>
   <li><a class="scrolling" href="#videos">MENU 3</a></li>
   <li><a class="scrolling" href="#contact">MENU 4</a></li>
</ul>

SCRIPT

<script type="text/javascript">
   $(document).ready(function () {
       $('.scrolling').click(function (e) {
       var linkHref = $(this).attr('href');
       console.log($(linkHref).offset().top);
       $('html, body').animate({
           scrollTop: $(linkHref).offset().top
       }, 1000);
       e.preventDefault();
      });
  });

P.S.: My version of jquery is 3.1.1.

If you need more information please let me know.

Hug.

Answer 1

You probably changed the oveflow:; of body, html or added a new overflow to an element within the body, see that your code works well here:

$(document).ready(function () {
    $('.scrolling').click(function (e) {
        var linkHref = $(this).attr('href');

        $('html, body').animate({
            scrollTop: $(linkHref).offset().top
        }, 1000);

        e.preventDefault();
    });
});

.box {
    margin: 10px;
    height: 240px;
    background: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="navbar-menu">
    <li><a class="scrolling" href="#home">MENU 1</a></li>
    <li><a class="scrolling" href="#portfolio">MENU 2</a></li>
    <li><a class="scrolling" href="#videos">MENU 3</a></li>
    <li><a class="scrolling" href="#contact">MENU 4</a></li>
</ul>

<div id="home" class="box"></div>
<div id="portfolio" class="box"></div>
<div id="videos" class="box"></div>
<div id="contact" class="box"></div>

If an element inside body has a scroll of its own you must change the html,body selector, like this:

$(document).ready(function () {
    $('.scrolling').click(function (e) {
        var linkHref = $(this).attr('href');

        $('#main').animate({ //TROCADO
            scrollTop: $(linkHref).offset().top
        }, 1000);

        e.preventDefault();
    });
});

.box {
    margin: 10px;
    height: 240px;
    background: #00f;
}
html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
}
#main {
   height: 100%;
   overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main">
    <ul class="navbar-menu">
        <li><a class="scrolling" href="#home">MENU 1</a></li>
        <li><a class="scrolling" href="#portfolio">MENU 2</a></li>
        <li><a class="scrolling" href="#videos">MENU 3</a></li>
        <li><a class="scrolling" href="#contact">MENU 4</a></li>
    </ul>

    <div id="home" class="box"></div>
    <div id="portfolio" class="box"></div>
    <div id="videos" class="box"></div>
    <div id="contact" class="box"></div>
</div>