Реализация события клика с обновленной позицией смещения

Question

У меня есть кнопка, которая при нажатии на нее меняет сетку столбцов по умолчанию по умолчанию на единую сетку столбцов. И Y смещение позиции содержащихся элементов в столбце изменяется после этого события click.

Мне нужно знать обновленное положение смещения Y, чтобы иметь возможность scrollTop определенному элементу сразу после изменения сетки столбца, но, похоже, я не уверен, что код работает, и не уверен, что моя структура является правильным способом рефакторинг, чтобы они все синхронизировались.

var lastTrigger; 
var target = $('#' + lastTrigger); 

$('button').click(function() { 
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12'); 
    lastTrigger = $(this).closest('div').attr('id'); 
    scrollView(updateOffset); 
}); 

function updateOffset() { 
    var currentOffset = target.offset().top; 
    return currentOffset; 
} 

function scrollView() { 
    $('html,body').animate({ 
     scrollTop: currentOffset 
    }, 1000); 
} 

Answer 1

Проблема здесь состоит в том, что ваш target не обновляется, когда вы нажали на кнопку, потому что lastTrigger не определена в момент переменной быть инициализирован. Поэтому, когда вы определяете lastTrigger внутри прослушивателя событий, ничего не происходит.

I created a fiddle, который исправил эту проблему путем инициализации target только после того, как lastTrigger был инициализирован и соответственно обновлен scrollTop.

var lastTrigger; 
var target; 

$('button').click(function() { 
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12'); 
    lastTrigger = $(this).closest('div').attr('id'); 
    scrollView(); 
}); 

function updateOffset() { 
    target = $('#' + lastTrigger); 
    var currentOffset = target.offset().top; 
    return currentOffset; 
} 

function scrollView() { 
    $('html,body').animate({ 
     scrollTop: updateOffset() 
    }, 1000); 
} 

Я надеюсь, что решает вашу проблему.

Answer 2

$('button').click(function() { 
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12'); 
    var target = $(this).closest('div'); 
    scrollView(updateOffset(target)); 
}); 

function updateOffset(target) { 
    var currentOffset = target.offset().top; 
    return currentOffset; 
} 

function scrollView(currentOffset) { 
    $('html,body').animate({ 
     scrollTop: currentOffset 
    }, 1000); 
}