For some links I need to keep the scroll position between Turbolinks load. This is simple to do with something along the lines of
$(document).on('turbolinks:click', function(event) {
windowsScrollsPosition = $(window).scrollTop();
});
$(document).on('turbolinks:load', function() {
$(window).scrollTop(windowsScrollsPosition);
});
My page, however, also have other links where keeping the scroll position would be very strange (links to unrelated content). My plan was to add a data tag to the link:
<a href="#" class="btn btn-danger tiny" data-turbo-scrollback="1">Delete</a></td>
Then add a basic if statement to the script setting the scroll. Something like this just to illustrate:
$(document).on('turbolinks:click', function(event) {
if ($(this).data('turbo-scrollback')) {
windowsScrollsPosition = $(window).scrollTop();
} else {
windowsScrollsPosition = 0;
}
});
Now, the problem I have run into is that I cannot find any way to access the clicked object. $(this), in the example above seems to merely go back to the trigger event in Turbolinks. event, seems to only contain a limited range on information passed on by Turbolinks trigger too. Even.target seems to have a jQuery guid, but I am not sure if that links to the link object or how to use it.
So, to cut a long question short: Is there a way to access the link object that was actually clicked to initiate the turbolinks:click?
Thanks! Charlie
Not having had much luck, I decided to solve the problem by adding an event listener based on the data tag instead and using that listener to record the scroll position:
$('a[data-turbo-scrollback="true"]').click(function(e) {
windowsScrollsPosition = $(window).scrollTop();
});
Then on turbolinks:load all that is needed is checking whether stored scroll value > 0 and if so setting scroll to that.
Doesn't feel quite as elegant as using the event triggers of Turbolinks, but gets the job done