Klicken Sie auf einen Link, um zu einem bestimmten div (jquery) zu scrollen

Question

Wenn ich auf einen Link klicke und versuche, zu einem bestimmten div mit langsamer Animation zu scrollen, wird die ganze Seite anstelle dieses bestimmten div gescrollt. Ich teile den Link zu den PLNKR unten öffnen Sie es im Vollbildmodus.

http://plnkr.co/edit/5ZlY7ivJ2xwckVeyIRzO?p=preview

für die Vollbildlade

http://run.plnkr.co/HV426GUKePHeJPfS/

Das Problem ist, dass, wenn der Inhalt in der rechten Seitenwand angeklickt wird (nur Empfehlung und CME & Attended cliked ist) das Das mittlere Feld sollte gescrollt werden, um das jeweilige div oben zu zeigen. Stattdessen wird die ganze Seite gescrollt, wodurch die Benutzeroberfläche nicht besonders nützlich ist. Ich habe versucht, die folgenden zwei Javascript-Code zum Anzeigen einiger Animation und Scrollen der middle_profile div oder mm div, aber keiner von ihnen funktioniert.

zum Scrollen middle_profile div

$("#bb").click(function() { 
    $('.middle_profile').animate({ 
    scrollTop: $("#recommendationDiv").position().top 
    }, 'slow'); 
}); 
$("#bb1").click(function() { 
    $('.middle_profile').animate({ 
    scrollTop: $("#CMEDiv").offset().top 
    }, 'slow'); 
}); 

zum Scrollen mm div

var scrolled = 0; 
$("#bb").on("click", function() { 
    scrolled = scrolled - 300; 
    $(".mm").animate({ 
    scrollTop: scrolled 
    }, 50); 
}); 

Gibt es eine andere Möglichkeit, es durch jquery oder eine andere Bibliothek zu tun, ist für die reibungslose Scrollen der Seite aufgenommen werden?

Answer 1

Sie müssen nur den $ (document) .ready() Code eingeben und in Ihrem css die Position: relative; oben: 0; zu deinem Div, der Fokus sein wird.

$(document).ready(function(){  
    $("#bb").click(function() { 
     $('html,body').animate({ 
     scrollTop: $("#recommendationDiv").offset().top 
     }, 'slow'); 
    }); 
    $("#bb1").click(function() { 
     $('html,body').animate({ 
     scrollTop: $("#CMEDiv").offset().top 
     }, 'slow'); 
    });  
    // var scrolled = 0; 
    // $("#bb").on("click" ,function(){ 
    //  scrolled=scrolled-300; 
    //   $(".mm").animate({ 
    //   scrollTop: scrolled 
    //  },50); 
    // }); 
    })