Александр83,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#Z1:hover, #Z11:hover, #Z111:hover{
color: #fff;
background: #0033FF;
}
a.Z1:hover, a.Z11:hover, a.Z111:hover{
color: #fff;
background: #0033FF;
}
.script_css{
color: #fff;
background: #0033FF;
}
</style>
<style type="text/css">
div.right_scrol{
height: 200px;
border: 4px solid red;
overflow-y: scroll;
position: relative;
}
div.right_scrol a{
display: block;
height: 150px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(function() {
jQuery('a[href^="#Z"]').on('click mouseenter mouseleave', function(event) {
event.preventDefault();
var hash = this.hash;
var scrollTop = jQuery(hash)[0].offsetTop ;// - 500;
if(event.type == 'click')jQuery('div.right_scrol').stop().animate({scrollTop}, 1000, () => location.hash = hash);
jQuery(this).addClass("script_css").siblings().removeClass("script_css");
jQuery(this.hash).addClass("script_css").siblings().removeClass("script_css");
})
jQuery(`a[href^="${location.hash}"]`).click();
});
</script>
</head>
<body>
<div class="left_img">
<a href="#Z1">Z1</a>
<a href="#Z11">Z11</a>
<a href="#Z111">Z111</a>
</div>
<div class="right_scrol">
<a id="Z1">Z1</a>
<a id="Z11">Z11</a>
<a id="Z111">Z111</a>
</div>
</body>
</html>