0

I need a button.click to scroll horizontal to next element. I have two elements laid horizontal with flexbox.

    $( document ).ready(function() {

    $("#front-button").on("click", function() {

       $("#page-2").css("display", "flex");       // (1)

       var divPos = $("#page-2").offset().left;   // (2)
       $('body').animate({scrollLeft: divPos}, "slow");

    });
});

html

<body id="main-wrap">

    <header id="main-header"> ... </header>

    <div id="body-wrap">
        <section id="page-1>
          ...
        </section>
        <section id="page-2>
          ...
        </section>
    </div>
</body>

css

html,body {

            font-family: "Sailec-Regular","Helvetica Neue",Helvetica,Arial;
            box-sizing: border-box;
            text-decoration: none;

            min-height: 600px;
            min-width: 100%;

            font-weight: 400;
            font-size: 100%;

            background: rgb(253, 253, 253);
            color: graytext;

            margin: 0;
            padding: 0;

            overflow: auto;
}
    *, *:before, *:after {

            box-sizing: inherit;
    }
    :root {
            --header-nav-ht: 10%;
            --body-page-ht: 90% ;
    }

/* ------------------------------------------------------------------ */

#main-wrap {

            min-width: 100%;
            height: 100%;
            margin: 0 auto;
            /*background-image: url("img/background-main.png");*/
            /*background-color: rgb(253, 253, 253);
            background-repeat: no-repeat;
            background-size: cover;*/
    }
    #body-wrap {

            min-width: 100%;
            height: 90%;
            display: flex;
    }
    #body-wrap > section {

            height: 100%;
            min-width: 100%;
    }
  1. The second element is hidden by default (display: none), so I turn it on.
  2. Here goes the animate function I've found here on stack.

So the first goes smooth, and element appears, but it doesn't scroll. Do You see any mistake in the code?

linearSpin
  • 93
  • 1
  • 8
  • You may need to add more code how your css and basic html looks like ? – DaniP Apr 20 '17 at 17:14
  • 1
    Your code seems to work for me if I imagine the HTML & CSS https://codepen.io/anon/pen/gWrgLQ – DaniP Apr 20 '17 at 17:18
  • @DaniP thanks for an answer, can You guess whats wrong with my code I added recently to the question? – linearSpin Apr 20 '17 at 17:28
  • Possible duplicate of [jQuery scroll to element](http://stackoverflow.com/questions/6677035/jquery-scroll-to-element) – Heretic Monkey Apr 20 '17 at 17:32
  • 1
    Your code is fine you just need to add 100% height to the html tag and also remove the overflow property that breaks the behavior https://codepen.io/anon/pen/aWNpRE – DaniP Apr 20 '17 at 17:38
  • You right, it's the 'overflow' property , curious why? Either way it's all working, thanks for help. – linearSpin Apr 20 '17 at 17:50

0 Answers0