Horizontale Scroll-Anker mit einer Seite (jQuery)

Question

Ich versuche, einen horizontal scrollenden Teil meiner Seite zu erstellen.

Es ist ein ziemlich einfaches Konzept, und ich habe es schon oft gemacht, also muss ich etwas ziemlich offensichtlich übersehen.

Es scheint, als ob es Alternativen zwischen dem richtigen Offset für jeden Klick.

$('a.scroll-trigger').click(function(e) { 
 
    var $this = $(this); 
 
    var $anchor = $($this.attr('href')); 
 
    var $container = $($this.attr('data-container')); 
 
    var offset = $anchor.offset().left; 
 
    $container.scrollLeft(offset); 
 
    e.preventDefault(); 
 
});

#pages { 
 
    overflow-x: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
#pages>section { 
 
    display: inline-block; 
 
    width: 768px; 
 
}

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

 
<ul> 
 
    <li><a class="scroll-trigger" href="#section1" data-container="#pages">Section 1</a></li> 
 
    <li><a class="scroll-trigger" href="#section2" data-container="#pages">Section 2</a></li> 
 
    <li><a class="scroll-trigger" href="#section3" data-container="#pages">Section 3</a></li> 
 
</ul> 
 

 
<!-- pages is nested in a container with a maximum width of 768px. --> 
 
<div id="pages"> 
 
    <section id="section1"> 
 
    <h2>Section 1</h2> 
 
    </section> 
 
    <section id="section2"> 
 
    <h2>Section 2</h2> 
 
    </section> 
 
    <section id="section3"> 
 
    <h2>Section 3</h2> 
 
    </section> 
 
</div>

Es funktioniert ist nicht richtig. Die Variable offset ist nicht immer korrekt.

Irgendwelche Ideen?

Answer 1

Suchen Sie das?

$('.scroll-trigger').each(function(index){ 
 
    $(this).on('click',function(e) { 
 
    var $this = $(this); 
 
    var $anchor = $this.attr('href'); 
 
    var $container = $this.attr('data-container'); 
 
    var elem = $($anchor); 
 
    var offset = (elem.offset().left - elem.offsetParent().offset().left); 
 

 
    if(offset >= 0){ 
 
     $($container).animate({'scrollLeft' : offset * index},200); 
 
    }else{ 
 
     $($container).animate({'scrollLeft' : offset * -index},200); 
 
    } 
 
    e.preventDefault(); 
 
    });      
 
})

#pages{ 
 
    position: relative; 
 
    overflow-x: hidden; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
    border:1px solid #565656; 
 
} 
 
#pages>section { 
 
    display: inline-block; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a class="scroll-trigger" href="#section1" data-container="#pages">Section 1</a></li> 
 
    <li><a class="scroll-trigger" href="#section2" data-container="#pages">Section 2</a></li> 
 
    <li><a class="scroll-trigger" href="#section3" data-container="#pages">Section 3</a></li> 
 
</ul> 
 

 
<!-- pages is nested in a container with a maximum width of 768px. --> 
 
<div id="pages"> 
 
    <section id="section1"> 
 
    <h2>Section 1</h2> 
 
    </section> 
 
    <section id="section2"> 
 
    <h2>Section 2</h2> 
 
    </section> 
 
    <section id="section3"> 
 
    <h2>Section 3</h2> 
 
    </section> 
 
</div>