2013-10-07 3 views
2

Я пытаюсь прокрутить страницу до «#Table_Details» с помощью прокрутки. Но я не могу заставить ее работать.как прокручивать до определенного div при щелчке/изменении переключателя

Когда я нажимаю/меняю радиоприемник (.ModemsSelect), страница прокручивается до местоположения переключателя, на который я только что нажал, вместо прокрутки страницы, где находится моя таблица («# table_Details»). Я не уверен, что я делаю это правильно или что происходит.

$(".ModemsSelect,.ServicesSelect").change(function (e) { 
    var data = $("#" + this.value).serialize(); 
    var request = $.ajax({ 
     url: "classes/sCart.php?action=add", 
     type: "POST", 
     data: data, 
     dataType: "html", 
     radioButton: $(this).attr('class') 
    }); 
    request.success(function (data) { 
     //$(".in_cart").html("");//clear last item selected 
     console.log("extra item added to cart"); 
     refreshCart(); 
     if (this.radioButton == "ModemsSelect") { 
      $.scrollTo($('#Table_Details')); 

      $("#icon_check_modem").html(""); 
      $("#icon_check_modem").html("<img src=\"../img/check_icon.png\">"); 
      $('.Modem_buttonNext').button("enable"); 
     } else if (this.radioButton == "ServicesSelect") { 
      $("#icon_check_Installtype").html(""); 
      $("#icon_check_Installtype").html("<img src=\"../img/check_icon.png\">"); 
      $(".install_buttonNext").button("enable"); 
     } else { 

     } 
    }); 
}); 

Любая помощь приветствуется. спасибо.

+0

Вы должны ждать, чтобы прокрутить до тех пор, пока вы сделали изменения HTML страницы. Вы запускаете вызов 'scrollTo', а jQuery вычисляет позицию, в которой он должен прокручиваться. Затем вы меняете макет страницы на вызовы на 'html()', но jQuery уже начал движение прокрутки. Таким образом, он не заканчивается в нужном месте. Мое предложение состоит в том, чтобы переместить этот вызов 'scrollTo' до конца и обернуть его в' setTimeout' с такой же задержкой в ​​500 мс. –

ответ

3

рабочий скрипку http://jsfiddle.net/ePstY/

Вы должны заменить это:

$.scrollTo($('#Table_Details')); 

с этим:

$('html, body').animate({scrollTop:$('#Table_Details').position().top}, 'slow'); 
+0

Vedat, спасибо. что сделал трюк :) – user1960170

+0

Рад помочь :) –

2

Попробуйте делать это таким

$('html, body').animate({ 
    scrollTop: $("#Table_Details").offset().top 
}, 2000); 

Вместо этого:

$.scrollTo($('#Table_Details')); 

Я получил код из этой статьи: SMOOTHLY SCROLL TO AN ELEMENT WITHOUT A JQUERY PLUGIN

Вот такой рабочий fiddle

+0

Рассмотрите вопрос о расширении своего ответа, чтобы объяснить, почему это достигает желаемого результата, возможно, связанного с документацией. Как есть, это лишь незначительно полезно. –

+0

@JoshuaDwire спасибо, я обновил свой ответ. – hellomello

Смежные вопросы