Плавная прокрутка страницы до якоря
 

Хочу на сайте реализовать плавную прокрутку страницы, но на просторах смог найти по name вверх, а мне нужно еще и вниз. Вот код:

if($("a[href^=#services_]")) {
  $("a[href^=#services_]").bind('click',function(event) {
    var $sender=$(this).attr("href");
    var $destination=$("a[name="+$sender.split("#")[1]+"]").offset().top;
    $('html,body').stop().animate({scrollTop:$destination},'slow');
    event.preventDefault();
  });
}

Собственно проблема (как мне кажется) в этих двух строках, ну или в одной из них:

var $destination=$("a[name="+$sender.split("#")[1]+"]").offset().top;
$('html,body').stop().animate({scrollTop:$destination},'slow');

Имя содержит помимо services_ дополнительный текст (везде разный):

<a name="services_абракадабра"></a>
...
<a name="services_симсимоткройся"></a>

Мучаюсь уже второй день, а разобраться не могу. С JS пока что на ВЫ :( Прошу помощи в решении данного вопроса ^^,

не проверял

$( 'a[href^=#services_]' ).click( function () {
	var id = $( this ).attr( 'href' ).match( /#.+$/ )[0];
	var offsetTop = $( id ).offset().top;
	$( 'body' ).stop().animate( {'scrollTop':offsetTop } );
} );

YamazakiHL,
Выложите минимальный HTML необходимый для работы скрипта

Drimogemon,
Там по крайней мере - Хеш нун задать в селекторе и return false иначе бу срабатывать по всем ссылкам

может он сам справится с этим то уж? нет)? очевидно что селектор на все ссылки идет) я порсто показал как это делается)) не буду же я ему скрипт псиать)

п.с. ой точно ты прав он как раз это делать и не умеет)) спс

не понял

Deff

табличка-навигации:

<table border="0px" cellpadding="0px" cellspacing="0px" id="link">
  <tr>
    <th align="center" colspan="2">Принимаются заказы на следующие виды фотоуслуг:</th>
  </tr><tr>
    <td align="center">
      <a href="#services_Свадебная фотосъёмка">
        <div>Свадебная фотосъёмка</div>
      </a>
    </td><td align="center">
      <a href="#services_Фотосъемка праздников">
        <div>Фотосъемка праздников</div>
      </a>
    </td>
  </tr>
</table>

таблички разделов:

<table width="100%" border="0px" cellpadding="0px" cellspacing="0px" id="list">
  <tr>
    <td align="left" class="list_title">
      <div class="cost">0,00 руб.</div>
      <a name="services_Свадебная фотосъёмка"></a>
      Свадебная фотосъёмка
    </td>
  </tr><tr>
    <td align="left" valign="top">
      ...описание...
    </td>
  </tr>
</table>
<table width="100%" border="0px" cellpadding="0px" cellspacing="0px" id="list">
  <tr>
    <td align="left" class="list_title">
      <div class="cost">0,00 руб.</div>
      <a name="services_Фотосъемка праздников"></a>
      Фотосъемка праздников
    </td>
  </tr><tr>
    <td align="left" valign="top">
      ...описание...
    </td>
  </tr>
</table>

Весь JS:

$(document).ready(function() {
    if($("a[href=#diapazon")) {/* прокрутка вверх - работает */
      $("a[href=#diapazon]").bind('click',function(event) {
        $('html,body').stop().animate({scrollTop:$("body").offset().top},'slow');
        event.preventDefault();
        return false;
      });
	} else if($("a[href^=#services_]")) {/* прокрутка вниз - не работает*/
      $("a[href^=#services_]").bind('click',function(event) {
        var $sender=$(this).attr("href").match( /#.+$/ )[0];
        var $destination=$sender.offset().top;
        $('html,body').stop().animate({scrollTop:$destination},'slow');
        event.preventDefault();
        return false;
      });
	}
  });

не помогает выше описанный

Вобщем
YamazakiHL, Drimogemonу плюс ставьте - поскольку он основную работу сделал - мну ток подправил

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $( 'a[href^=#services_]' ).click( function () {
  	var id = $( this ).attr( 'href' ).match( /#.+$/ )[0].substr(1);
	var offsetTop = $("a[name='"+ id + "']").offset().top;
	$('body,html').animate({scrollTop:offsetTop}, 500);
    return false;
  });
});
</script>

<table border="0px" cellpadding="0px" cellspacing="0px" id="link">
  <tr>
    <th align="center" colspan="2">Принимаются заказы на следующие виды фотоуслуг:</th>
  </tr><tr>
    <td align="center">
      <a href="#services_Свадебная фотосъёмка">
        <div>Свадебная фотосъёмка</div>
      </a>
    </td><td align="center">
      <a href="#services_Фотосъемка праздников">
        <div>Фотосъемка праздников</div>
      </a>
    </td>
  </tr>
</table>




<table width="100%" border="0px" cellpadding="0px" cellspacing="0px" id="list">
  <tr>
    <td align="left"   height="300px"   class="list_title">
      <div class="cost">0,00 руб.</div>
      <a name="services_Свадебная фотосъёмка"></a>
      Свадебная фотосъёмка
    </td>
  </tr><tr>
    <td align="left" valign="top">
      ...описание...
    </td>
  </tr>
</table>
<table width="100%"    height="300px"    border="0px" cellpadding="0px" cellspacing="0px" id="list">
  <tr>
    <td align="left" class="list_title">
      <div class="cost">0,00 руб.</div>
      <a name="services_Фотосъемка праздников"></a>
      Фотосъемка праздников
    </td>
  </tr><tr>
    <td align="left"  height="700px"   valign="top">
      ...описание...
    </td>
  </tr>
</table>

Спасибо большое! Долго же я мучился... Обоим + !:thanks:
Поясните пожалуйста за что отвечает ...substr(1); ? или поясните строку вцелом

Она берет строку из href, которая начинается с #, но в name этого значка нет сокращаем на один - substr(1); читает строку не с 0 а с 1

Ааам, понятно. Спасибо.