Inhalt Slider mit JQyery

Question

Hallo Leute, ich versuche, einen Content-Slider mit jQuery zu implementieren. Ich habe ein div, das viel Text und einige Abschnitte hat. und wir können nach unten scrollen, um den Text zu sehen. Es sieht ungefähr so ​​aus screenshot. Wenn der Benutzer nun auf eine der Sprungoptionen klickt, sollte der Benutzer zu diesem Abschnitt gebracht werden (z. B. wenn der Benutzer auf Koop-Operationen klickt, sollte er ihn zu Koop-Operationen bringen) und wenn der Benutzer den Text nach unten scrollt Abschnitt, der im Fokus ist es sollte

Bitte sagen sie mir, in dem Sprung Option hervorgehoben werden, wie kann ich implementieren es

und wenn es irgendein Plugin, das sie mir tun kann sagen, darüber zu. Dank

Answer 1

Die gute Lösung könnte hier jquery.scrollTo sein - Leicht, Cross-Browser und hochgradig anpassbare animierte Scrollen mit jQuery

index.html

<!-- Include jQuery from somewhere, must use version 1.8 or above --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<!-- Include latest jquery.scrollTo, currently 2.1.0, can download from https://github.com/flesler/jquery.scrollTo/releases --> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script> 
<!-- Initialize the plugin, the contents of the script can be inlined here, of course --> 
<script type="text/javascript" src="js/init.js"></script> 

Init.js

// You can avoid the document.ready if you put the script at the bottom of the page 
$(document).ready(function() { 
    // Bind to the click of all links with a #hash in the href 
    $('a[href^="#"]').click(function(e) { 
    // Prevent the jump and the #hash from appearing on the address bar 
    e.preventDefault(); 
    // Scroll the window, stop any previous animation, stop on user manual scroll 
    // Check https://github.com/flesler/jquery.scrollTo for more customizability 
    $(window).stop(true).scrollTo(this.hash, {duration:1000, interrupt:true}); 
    }); 
}); 

Sie können die folgenden Informationen finden: here