Simtwo Simtwo - 6 months ago 9
HTML Question

scroll to a link and activate it

I made a website in two column. On the left side there are alls link, on the other side there is the content. When you click on a link the content goes up, and the link also align itself.
You can test it here

I'm searching for a way to implement a button on the bottom of the left side, that allow to scroll to the top of the document in a special way :
il will to activate the first link on top (and scroll to it) and in the same time align the correspondent article of the right side. So far the alignment system is working, except for this link, see the code i'm trying to add bellow.



$('.cd-top').bind('click', function(e) {
e.preventDefault();

var $container = $('.menu-content:first'),
$desc = $('.menu-content:first');

$desc.slideDown('100', function() {
$("#scrollingaside").scrollTo( $container, 500, {offset: { top:-1 } } );// la hauteur d'alignement c'est ici !
$("#scrollingontheright").scrollTo( $("#" + $container.attr('data-id')), 1500);
});
}
});
$('.article').bind('click', function() {
var idproj = $(this).find('span:first').attr('id');
$('.menu-content[data-id="' + idproj + '"]').find('.cd-top').trigger('click');
});

Answer

// use on() instead of bind

$('.expander').on('click', function(e) {
    e.preventDefault();

    var $container = $(this).parents('.menu-content:first'),
    $desc = $(this).parents('.menu-content');
// newly added
    $('.expander').parents(".current").removeClass('current');
    if($container.hasClass('current') == false) {

        var others = $('.current');
        $container.addClass('current');

        $desc.slideDown('100', function() {
            $("#scrollingaside").scrollTo( $container, 500, {offset: { top:-1 } } );//    la hauteur d'alignement c'est ici !
            $("#scrollingontheright").scrollTo( $("#" + $container.attr('data-id')), 1500);  
        });
    }
});
$('.article').bind('click', function() {
    var idproj = $(this).find('span:first').attr('id');
    $('.menu-content[data-id="' + idproj + '"]').find('.expander').trigger('click');
});
**// new code**
 $(".cd-top").on("click",function(){
$('.expander:first').trigger("click");
});