Александр83,
а можно без php?

<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>

#Z1:hover, #Z11:hover, #Z111:hover{
    color: #fff;
    background: #0033FF;
}
a.Z1:hover, a.Z11:hover, a.Z111:hover{
    color: #fff;
    background: #0033FF;
}
#Z1 .script_css, #Z11 .script_css, #Z111 .script_css{
    color: #fff;
    background: #0033FF;
} 
a.Z1 .script_css, a.Z11 .script_css, a.Z111 .script_css{
    color: #fff;
    background: #0033FF;
}

jQuery(document).ready(function() {
    jQuery('a[href^="#Z1,#Z11,#Z111"]').click(function() {
        var target = jQuery(this).attr("href");
        jQuery('div.right_scrol').animate({
            scrollTop: jQuery(target).position().top - 500}, 1000);
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery('#Z1,#Z11,#Z111').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('#Z1,#Z11,#Z111').removeClass("script_css")
    })
});

jQuery(document).ready(function() {
    jQuery('a[id^="Z1, Z11, Z111"]').click(function() {
        var target = jQuery(this).attr("id");
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.Z1, a.Z11, a.Z111').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.Z1, a.Z11, a.Z111').removeClass("script_css")
    })
});

вот!, не знаю как в JS объединить значения Z1,Z11,Z111 "jQuery('a[href^="#Z1,#Z11,#Z111"]')" возможно сделал ошибки, но мне в принципе это не нужно так как у меня там php.

Александр83,

#Z1.script_css, #Z11.script_css, #Z111.script_css{
    color: #fff;
    background: #0033FF;
}

jQuery('a[href^="#Z"]').click

Здравстуйте, скажите пожалуйста как сделать в данном коде так чтобы значениям Z1, Z11, Z111 присваивался script_css по отдельности, сейчас при переходе по якорю подсвечиваются все три так как видит начало Z1, код прежний ниже:

jQuery(document).ready(function() {
    jQuery('a[id^="Z1, Z11, Z111"]').click(function() {
        var target = jQuery(this).attr("id");
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.Z1, a.Z11, a.Z111').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.Z1, a.Z11, a.Z111').removeClass("script_css")
    })
});

немного исправил:

jQuery(document).ready(function() {
    jQuery('a[href^="#Z"]').click(function() {
        var target = jQuery(this).attr("href");
        jQuery('div.right_scrol').animate({
            scrollTop: jQuery(target).position().top - 500}, 1000);
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery('#Z1,#Z11,#Z111').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('#Z1,#Z11,#Z111').removeClass("script_css")
    })
});

Александр83,
target зачем?

Я не силен в JS, что же в замен target можно использовать...

убрать строки 8 и 11, сообщение #45

Убрал, но все равно подсвечивает все что начинается на Z1

Александр83,
не могу понять, что вы хотите сделать.