Jquery scroll to closest element with .class

Question

The problem

I have my html page, i am using a search engine like "Ctrl+F" created by me, i integrated a jquery plugin which highlights me all the result i searched for, and it adds the class ".highlight" to the elements it highlights, the thing is i want to scroll between them , each time i press the search button.

I tried this but it didn't work:

 $(document).ready(function () {

        $("#btnSearch").on("click", function () {
            $('html, body').animate({
                'scrollTop': $(this).closest(".highlight").position().top
            });
        });
    });

Answer 1

Maybe this helps you...

 $(document).ready(function () {

    $("#btnSearch").on("click", function () {
        $('html, body').animate({
            'scrollTop': $(this).closest(".highlight").parent().scrollTop()+ $(this).closest(".highlight").offset().top - $(this).closest(".highlight").parent().offset().top,

        });
    });
});