0

Good morning,

I am looking for a solution to the following problem. When a user edits an item in a list and then saves/closes the item, the page reloads back at the top. I would like the page to reload where the scroll position was when the user initially clicked on the edit button to edit the list item. Is this something that can be done with Jquery or Javascript, and if so, would anyone happen to have any code they wouldn't mind sharing? Thanks in advance.

0

I had a similar requirement for a client, albeit it was to maintain the state of a clicked heading in a Content Query Web Part. The key is to use localStorage.

You can find a primer on it here.

You could easily modify this code to your environment by locating the clicked item and getting its offset position...something like element.getBoundingClientRect().top for the top (or y) position and element.getBoundingClientRect().left for the left (or x) position.

$(function() {

    // automatically collapse all data view list items
    $("li.dfwp-item").find("ul.dfwp-list").hide();

    // make sure the groupheader has a consistent data-id attribute and looks 'clickable'
    $('.groupheader').each(function(index) { 
        $(this).attr('data-id', index);
        $(this).css('cursor', 'pointer');

        getValueFromStorage(this);

        if(this.classList.contains('is-opened')) {
            $(this).next("ul.dfwp-list").show();
        } else {
            $(this).next("ul.dfwp-list").hide();
        }
    });

    $(".groupheader").on("click", function() {

        if(!this.classList.contains('is-opened')) {
            this.classList.add('is-opened');

            // add the current groupheader element data-id to localStorage
            addSectionToStorage(this);
        } else {
            this.classList.remove('is-opened');

            // remove the item from localStorage
            removeValueFromStorage(this);
        }

        // toggle children list items
        $(this).next("ul.dfwp-list").slideToggle(300);
    });

    // set item in localStorage
    function addSectionToStorage(el) { 
        var id = el.getAttribute('data-id');
        if(!localStorage.getItem(id)) {
            localStorage.setItem(id, Math.random().toString(36).substring(2) + (new Date()).getTime().toString(36));
        }
    }

    // remove the item from localStorage
    function removeValueFromStorage(el) {
        var id = el.getAttribute('data-id');
        if(id) {
            localStorage.removeItem(id);
        }
    }

    function getValueFromStorage(el) {
        var arr = [];
        var id = el.getAttribute('data-id');
        for(var i = 0, len = localStorage.length; i < len; i++) {
            var key = localStorage.key(i);
            var value = localStorage[key];
            arr.push({ 
                key: key, 
                value: value 
            });
        }
        arr.filter(function(item) {
            return item.key === id;
        }).map(function(group) {
            if(group.key === id) {
                el.classList.add('is-opened');
            }
        });
    }

});

`

  • Thank you so much for the detailed reply, it looks like this is very close to precisely what I need. I'll give it a shot, and try adding the element.getBoundingClientRect().top to get the position of the clicked item. Thanks again for your time! – dberger Feb 8 '18 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.