How to set focus on the image of an HTML page?

After cropping the image, the page scrolls to the top of the window. The new cropped image doesn’t get focused. Normally .focus() JavaScript method is applies to the form controls. The following way is helped me to solve the problem.

 document.getElementById("my-cropped-image").scrollIntoView();

JavaScript Code:

$.ajax({
            url: '@Url.Action("CropImage", "CropImage", new { area = "web" })',
            type: 'POST',
            data: {
                imagePath: file,
                cropPointX: cropPointX,
                cropPointY: cropPointY,
                imageCropWidth: imageCropWidth,
                imageCropHeight:imageCropHeight
            },
            success: function (data) {
                $("#my-cropped-image")
                    .attr("src",data.photoPath + "?t=" + new Date().getTime())
                    .show();
                document.getElementById("my-cropped-image").scrollIntoView();// Use this
            },
            error: function (data) { }
        });

Description:

When the user uploads the image and cropped. The cropped image gets focused.It is because of the JavaScript scrollIntoView() method.