Scrolling is not working

Question

Scrolling is not working

Navigation

#1 by (0 votes)

0

I'm having a problem with a site I'm creating, the scrolling effect I've made in Js is not working correctly, I put a console.log () to see if the event is at least running, and that's the only problem is that the scroll does not happen. If you can help me, I can help you.

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

Q: My jquery version is 3.1.1.

If you need more information please let me know.

Hug.

javascript html

asked by anonymous 23.02.2017 / 16:43

1 answer

Java - Canvas blinks when redrawing screen Problem using Gson on Wildfly

score 0 · Accepted Answer

You've probably changed oveflow:; of body, html or added a new overflow for an element within body , see that your code works fine 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><ulclass="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 a body has a scroll of its own you should change the html,body of the 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><divid="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>