Форум

djonA · #1 (**permalink**) 18.05.2015, 14:40

Помогите поправить скрипт для плавного скролинга к 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 · #2 (**permalink**) 18.05.2015, 14:59

Сообщение от djonA

а второй сюда:

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

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

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

ksa · #3 (**permalink**) 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.
Не проверял...

djonA · #4 (**permalink**) 18.05.2015, 15:04

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

рони · #5 (**permalink**) 18.05.2015, 15:10

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 · #6 (**permalink**) 18.05.2015, 15:12

Сообщение от djonA

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

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

djonA · #7 (**permalink**) 18.05.2015, 15:15

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

kostyanet · #8 (**permalink**) 18.05.2015, 16:29

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

Форум

Справочник

Discord чат

Курсы javascript