нажмите на ссылку, чтобы перейти к определенному div (jquery)

Question

Когда я нажимаю ссылку и пытаюсь прокрутить до определенного div с медленной анимацией, вся страница будет прокручиваться вместо этого конкретного div. Я поделился ссылкой на plnkr ниже, чтобы открыть его в полноэкранном режиме.

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

для загрузки полного экрана

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

Проблема заключается в том, что, когда содержание присутствует в правой боковой панели нажата (только рекомендация и CME & Присутствовали является cliked) прокрутить среднюю панель, чтобы показать, что конкретный div сверху. Вместо этого происходит то, что вся страница получает прокрутку, что делает пользовательский интерфейс малопригодным. Я попытался использовать следующие два javascript-кода для показа анимации и прокрутки div_file или mm div, но ни один из них не работает.

для прокрутки 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'); 
}); 

для прокрутки мм DIV

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

Есть еще один способ сделать это с помощью JQuery или какой-либо другой библиотеке должен быть включен для гладкой прокрутки страницы?

Answer 1

Вам просто нужно вставить код $ (document) .ready() и установить в своем css позицию: relative; верх: 0; к вашему div, который будет сосредоточен.

$(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); 
    // }); 
    })