Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   плавный скролинг для 2 элементов (https://javascript.ru/forum/misc/55871-plavnyjj-skroling-dlya-2-ehlementov.html)

djonA 18.05.2015 14:40

плавный скролинг для 2 элементов
 
Помогите поправить скрипт для плавного скролинга к 2 элементам.

Для одного делаю вот так:
<script>
$(document).ready(function (){
$("#go").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#go1").offset().top
}, 2000);
//});
});
});
</script>

<div id="go">Go</div>
<br><br><br>
<div id="go1">Syda</div>


А как сделать для 2 div если у меня
<div id="go">Go1</div>
<div id="go_new">Go2</div>


Первый должен перемещать сюда:
<div id="go1">Syda1</div>

а второй сюда:
<div id="go_new1">Syda2</div>

ksa 18.05.2015 14:59

Цитата:

Сообщение от djonA
а второй сюда:
<div id="go_new1">Syda2</div>

Удобнее сделать вот так

<div id="go1_new">Syda2</div>

ksa 18.05.2015 15:03

Тогда можно сделать нечто такое...

$(function(){
	$("#go").click(function (){
		var id=this.id;
		$(this).animate(function(){
			$('html, body').animate({
				scrollTop: $("#"+id+'_new').offset().top;
			}, 2000);
		});
	});
});

P.S.
Не проверял... :no:

djonA 18.05.2015 15:04

Но все равно мне надо обработчик jquery который будет отправлять в нужный div при клике

рони 18.05.2015 15:10

scroll плавный скролинг до элемента
 
djonA,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .item  {
     margin-top: 1500px;

  }

  .go {
     cursor: pointer;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <script>

  (function ($) {
      $.fn.scrollTo = function (speed, easing, callback) {
          $('body,html').animate({
              scrollTop: this.offset().top
          }, speed, easing, callback);
          return this;
      };
  }(jQuery));
   $(function() {
    var a = $(".go"),
        b = $(".item");
    a.each(function(a, c) {
        $(c).click(function() {
            b.eq(a).scrollTo(800)
        })
    })
});
  </script>
</head>

<body>
<div class="go">Go1</div>
<div class="go">Go2</div>
<div class="item">Syda1</div>
<div class="item">Syda2</div>
</body>

</html>

ksa 18.05.2015 15:12

Цитата:

Сообщение от djonA
Но все равно мне надо обработчик jquery который будет отправлять в нужный div при клике

Выше я показал пример такого обработчика...

djonA 18.05.2015 15:15

То что надо спасибо большое!!!!

kostyanet 18.05.2015 16:29

Без js, на css можно домотать до верха документа плавно?


Часовой пояс GMT +3, время: 08:27.