Scroll using custom data- attribute

[tun712]

• My Primary code jsfiddle
• I was using iscroll to scroll to target.
• data-section attribute is used for section id. section is full height & full width size.
• data-slide attribute is used to get target id, it is animated mouse icon.

how to scroll to target ?

Need help to create scrolling using custom data- attribute

[Dani]

This should be rather simple to do with jQuery, unless I'm misunderstanding what you're asking. First retrieve how many pixels from the top of the webpage the attribute you want to scroll to is. Here, we select the first element that has data-attr=foo and then calculate its position in the DOM.

var position = $('[data-attr=foo]').first().offset().top;

Now, we can scroll to that position.

$('html, body').animate({
    scrollTop: position
});

[tun712]

@Dani Thanks, I got reply on this after long time!
Your code solution works sometimes, sometimes not.

Following is my code. I'm stuck with scrolling.

I'm using class active to make div as current div in viewport.

I need help to scroll to div using nav created using js

HTML

<div class="content">
    <div class="content_section active" data-index="1"></div>
    <div class="content_section" data-index="2"></div>
    <div class="content_section" data-index="3"></div>
    <div class="content_section" data-index="4"></div>
</div>

/*following is generated dynamically using js as per number of content_section*/
<ul class="nav">
    <li><a data-index="1"  class="active_dot"></a></li>
    <li><a data-index="2"></a></li>
    <li><a data-index="3"></a></li>
    <li><a data-index="4"></a></li>
</ul>

CSS

.content{
    width: 100vw;
    height: 100vh !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 10;
    overflow: hidden
}

.content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    display: inline-block;
    z-index: 1;
    top: 0;
    left: 0;
    background: rgba(5,0,4,0.7);
    }

.content_section    {
    rgba(224,185,48,0.85)
    position: relative  !important;
    height: 100vh !important;
    width: 100vw !important;
    margin: auto;
    z-index: 2; 
}

Need help with this

$("ul.nav li a").on('click', function (e) {
    e.preventDefault();

});     

[gentlemedia]

I had a play with this too and I came up with the following. It does what you want, but slightly different. This also keeps on working when JS fails to load or is turned off (due to scrolling to ID which becomes then just jump to anchors).

HTML:

<nav>
    <ul>
        <li><a href="#section-1" data-section="section-1" class="anchor">section 1</a></li>
        <li><a href="#section-2" data-section="section-2" class="anchor">section 2</a></li>
        <li><a href="#section-3" data-section="section-3" class="anchor">section 3</a></li>
        <li><a href="#section-4" data-section="section-4" class="anchor">section 4</a></li>
    </ul>
</nav>

<section id="section-1" class="section section-1">

    <h1>section 1</h1>

</section>
<section id="section-2" class="section section-2">

    <h1>section 2</h1>

</section>
<section id="section-3" class="section section-3">

    <h1>section 3</h1>

</section>
<section id="section-4" class="section section-4">

    <h1>section 4</h1>

</section>

CSS:

body {
    overflow: hidden;
}

nav {
    position: fixed;
    left: 0;
    right: 0;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
}

nav li {
    height: 100px;
    line-height: 100px;
}

.anchor {
    text-decoration: none;
    color: #111;
    padding: .5rem 1.5rem;
    border-radius: .5rem;
    border: 2px solid #111;
}

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.section-1 {
    background-color: #69D2E7;
}

.section-2 {
    background-color: #A7DBD8;
}

.section-3 {
    background-color: #E0E4CC;
}

.section-4 {
    background-color: #F38630;
}

h1 {
    margin: 0;
}

.section.in-view h1::after {
    content: " is now in view";
}

jQuery:

$(function() {

    var $window = $(window);

    $(document).on('click', '.anchor', function (e) {
        e.preventDefault();
        var anchor = $(this).attr('data-section');
        $('html, body').animate({
            scrollTop: $('#'+anchor).offset().top - 0
        }, 500);
    });

    $window.on('scroll load', function () {
        $('.section').each(function () {
            var section = $(this),
                top = section.offset().top;
            if ($window.scrollTop() == top) {
                section.addClass('in-view').siblings().removeClass('in-view');
            }
        });
    });

});

DEMO:
https://codepen.io/gentlemedia/full/GLoLqE (adding 'in-view' class on page load doesn't work in Codepen due to its iframe)

[tun712]

@gentlemedia thanks
Please check my code on codepen. After checking my code you will understand my problem.
Scrolling is not working properly. Need help to simplify my code.

DEMO of my code
https://codepen.io/anon/pen/PgNBrb OR
https://s.codepen.io/anon/fullpage/PgNBrb

[gentlemedia]

There are many ways to skin a cat and each and every way is up for a debate, also mine, but you're overcomplicationg things with your logic in the HTML, in the CSS and in your jQuery. Some don't make much or any sense either.

It's best practice to scroll to an ID, because this way users can also navigate to a section without JS through the normal hrefs (href="#1"). You can give the nav items a data attribute, but the sections need to have an ID which you target.

<nav>
    <ul>
        <li><a href="#1" data-index="1" class="bullet">section 1</a></li>
        <li><a href="#2" data-index="2" class="bullet">section 2</a></li>
        <li><a href="#3" data-index="3" class="bullet">section 3</a></li>
        <li><a href="#4" data-index="4" class="bullet">section 4</a></li>
    </ul>
</nav>

<section id="1" class="section section-1">
    <h1>section 1</h1>
</section>
<section id="2" class="section section-2">
    <h1>section 2</h1>
</section>
<section id="3" class="section section-3">
    <h1>section 3</h1>
</section>
<section id="4" class="section section-4">
    <h1>section 4</h1>
</section>

Not sure why you needed a wrapper div, .content, but I'll leave it out here. Why you choose for an ::after pseudo element to give it a background color is also a mysterie to me and do you know what an !important rule does? The properties that have them, have them for no reason.

I'm not going to investigate where your problem might be within your code, because the logic is not making much sense. Adding/removing classes to show/hide the sections through your nav by clicking on the bullets is not what I would do.
There's a window scroll event that you can use to do this and a lot more, but first the click event for the bullets to scroll to target.

$(document).on('click', '.bullet', function (e) {
    e.preventDefault();
    var bullet = $(this).data('index');
    $('html, body').animate({
        scrollTop: $('#' +bullet ).offset().top - 0
    }, 500);
});

1. document on click handler is used so that if the nav gets build dynamically the bullets are clickable.
2. var bullet = $(this).data('index'); - store the value of data-index in the variable 'bullet'
3. $('#' +bullet ) - use that value to identify the id in the selector to scroll to.

The window scroll event (combined with 'load' in order to execite on load as well):

var $window = $(window);

$window.on('scroll load', function () {
    $('.section').each(function () {
        var section = $(this),
            top = section.offset().top;
        if ($window.scrollTop() == top) {
            $('.bullet').removeClass('active');
            var id = section.attr('id');
            $('.bullet[data-index="' + id + '"]').addClass('active');
        }
    });
});

1. top = section.offset().top; - store the top of the section in a var
2. if ($window.scrollTop() == top) - if the top of the section is equal to the top of the viewport
3. var id = section.attr('id'); - store the ID value of the section that's at the top of the viewport
4. $('.bullet[data-index="' + id + '"]').addClass('active'); - add the active class on the bullet associated with its section.

With just that you have it like you want it.
DEMO: https://projects.gentle.media/scroll/

[tun712]

@gentlemedia

Thanks.

Now, I'm using your code. my code was confusing