After clicking on an and if you want to bring the image into view using the following script.

We have a method called scrollIntoView which is supported by all the major browsers that align an element automatically with the top/left of the viewport.

You can also apply the transitions such as “smooth, auto, or instant” scroll behavior which are supported by modern browsers.

<html>
	<head>
        <script>
     function bringToView() {
    var element = document.getElementById("image");
    element.scrollIntoView();

    /*
    scrollIntoView({
		behavior: "smooth", // or "auto" or "instant"
		block: "start" // or "end"
	});
	*/
}  
		</script>
	</head>
    
	<body>
        <img id="image" src="https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg" onclick="bringToView()"/>
	</body>

</html>

CLICK ON THE FOLLOWING IMAGE TO SEE THE SCROLLINTOVIEW EXAMPLE!!!!

Categorized in:

Programming

Tagged in: