Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как сделать плавный переход к блоку после действия .trigger('click')? (https://javascript.ru/forum/jquery/70864-kak-sdelat-plavnyjj-perekhod-k-bloku-posle-dejjstviya-trigger-%27click%27.html)

NeXan 07.10.2017 20:52
Как сделать плавный переход к блоку после действия .trigger('click')?
 
Здравствуйте, у меня на сайте v-thailand.com реализованы AJAX комментарии. Хотелось бы добавить плавный переход к вновь добавленному комментарию (якорю). Иногда он появляется не в видимой части экрана (когда форма добавления комментария слишком высоко). Подскажите, как можно это сделать?

Приведу в пример только конец когда, где нужно его встатить, а то он большой. Логичнее всего было бы вставить этот код в самую последнюю очередь, после // действие, после того, как комментарий был добавлен

success: function (newComment) {
  // Если уже есть какие-то комментарии
  if($('.commentlist').length > 0){

    // Если текущий комментарий является ответом				
    if($('#respond').parent().hasClass('comment')){

      // Если уже есть какие-то ответы		
      if($('#respond').parent().children('.children').length){								
         $('#respond').parent().children('.children').append(newComment);

      } else {

         // Если нет, то добавляем  <ul class="children">
         newComment = '<ul class="children ajax-com">'+newComment+'</ul>';							
         $('#respond').parent().append(newComment);

      }

       // закрываем форму ответа
       $("#cancel-comment-reply-link").trigger("click");

    } else {

        // обычный коммент
	$('.commentlist').append(newComment);

     }

  }else{

      // если комментов пока ещё нет, тогда
      newComment = '<ol class="commentlist">'+newComment+'</ol>';
     $('#respond').before($(newComment));

  }

     // очищаем поле textarea			
     $('#comment').val('');

  },

     complete: function(){
    // действие, после того, как комментарий был добавлен
    $('#submit').removeClass('loadingform').val('Отправить');

}
});
}
return false;
});

рони 07.10.2017 21:16
NeXan,
строка 40, id заменить на селектор нового блока
var top = $(id).offset().top;
 $('body,html').animate({scrollTop: top}, 2000);

NeXan 07.10.2017 22:12
Вложений: 1
Цитата:
Сообщение от рони (Сообщение 466832)
NeXan,
строка 40, id заменить на селектор нового блока
К сожалению, не работает, отладчик выдает какую-то ошибку и работа скрипта прекращается. Прикрепил скрин. На странице создается такой блок с Id
<li id="li-comment-3502 ajax-new-comment">
СОДЕРЖАНИЕ БЛОКА
</li>

рони 07.10.2017 22:31
NeXan,
id="li-comment-3502 ajax-new-comment"> это лишнее и что вы будите делать при создании следующего блока?
может класс? или хотя бы так

success: function (newComment) {
newComment = $('<ul class="children ajax-com">'+newComment+'</ul>');
//...

var top = newComment.offset().top; 
 $('body,html').animate({scrollTop: top}, 2000); 

}

рони 07.10.2017 22:34
NeXan,
или так если они у вас по порядку

var top = $(".children.ajax-com:last").offset().top;

NeXan 07.10.2017 22:56
1 вариант. Удалил "li-comment-3502", код заработал, однако, если оставить на станице несколько комментариев без перезагрузки, то переход будет все время на первый.

2. вариант. Выдается такая ошиба: TypeError: newComment.offset is not a function at Object.success. Отладчик выделил: offset()
var top = newComment.offset().top;

Я как понимаю, второй вариант был бы предпочтительнее, так как будет осуществляется переход каждый раз к 1 комментарию.

NeXan 07.10.2017 23:00
Цитата:
Сообщение от рони (Сообщение 466853) 
var top = $(".children.ajax-com:last").offset().top;
А этот код исправно переходит к последнему, но если добавить комментарий выше, переход все равно будет в самый конец))

рони 07.10.2017 23:11
Цитата:
Сообщение от NeXan
2. вариант. Выдается такая ошиба
где код?

NeXan 07.10.2017 23:20
Цитата:
Сообщение от рони (Сообщение 466861)
где код?
Вот полный вариант:
jQuery.extend(jQuery.fn, {
	/*
	 * функция проверки, что длина поля не меньше 3х символов 
	 */
	checka: function () {
		if (jQuery(this).val().length < 3) {jQuery(this).addClass('error');
		setTimeout (function(){
            $(this).removeClass('error');
         }.bind(this), 1500);return false} else {jQuery(this).removeClass('error');return true}
	},
	/*
	 * функция проверки правильности введенного email
	 */
	checke: function () {
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		var emailaddressVal = jQuery(this).val();
		if (!emailReg.test(emailaddressVal) || emailaddressVal == "") {
			jQuery(this).addClass('error');setTimeout (function(){
            $(this).removeClass('error');
         }.bind(this), 1500);return false
		} else {
			jQuery(this).removeClass('error');return true
		}
	},
});
 
jQuery(function($){
	$('#commentform').submit(function(){
		// может такое случиться, что пользователь залогинен - нужно это проверить, иначе валидация не пройдет
		if($("#author").length) var author = $("#author").checka();
		if($("#email").length) var email = $("#email").checke();
		var comment = $("#comment").checka();
		// небольшое условие для того, чтобы исключить двойные нажатия на кнопку отправки
		// в это условие также входит валидация полей
		if (!$('#submit').hasClass('loadingform') && !$("#author").hasClass('error') && !$("#email").hasClass('error') && !$("#comment").hasClass('error')){
			$.ajax({
				type : 'POST',
				url : 'https://' + location.host + '/wp-admin/admin-ajax.php',
				data: $(this).serialize() + '&action=ajaxcomments',
				beforeSend: function(xhr){
					// действие при отправке формы, сразу после нажатия на кнопку #submit 
					$('#submit').addClass('loadingform').val('Загрузка');
				},
				error: function (request, status, error) {
					if(status==500){
						alert('Ошибка при добавлении комментария');
					} else if(status=='timeout'){
						alert('Ошибка: Сервер не отвечает, попробуй ещё.');
					} else {
						// ворпдрессовские ошибочки, не уверен, что это самый оптимальный вариант
						// если знаете способ получше - поделитесь
						var errormsg = request.responseText;
						var string1 = errormsg.split("<p>");
						var string2 = string1[1].split("</p>");
						alert(string2[0]);
					}
				},
				success: function (newComment) {
					// Если уже есть какие-то комментарии
					if($('.commentlist').length > 0){
						// Если текущий комментарий является ответом
						if($('#respond').parent().hasClass('comment')){
							// Если уже есть какие-то ответы
							if($('#respond').parent().children('.children').length){	
								$('#respond').parent().children('.children').append(newComment);
							} else {
								// Если нет, то добавляем  <ul class="children">
								newComment = '<ul class="children ajax-com">'+newComment+'</ul>';

								$('#respond').parent().append(newComment);
								
								var top = newComment.offset().top;
								$('body,html').animate({scrollTop: top}, 2000);
							}
							// закрываем форму ответа
							$("#cancel-comment-reply-link").trigger("click");
						} else {
							// обычный коммент
							$('.commentlist').append(newComment);
						}
					}else{
						// если комментов пока ещё нет, тогда
						newComment = '<ol class="commentlist">'+newComment+'</ol>';
						$('#respond').before($(newComment));
					}
					// очищаем поле textarea			
					$('#comment').val('');

				},
				complete: function(){
					// действие, после того, как комментарий был добавлен
					$('#submit').removeClass('loadingform').val('Отправить');
				}
			});
		}
		return false;
	});
});

рони 07.10.2017 23:27
NeXan,
тупо найдите обьект к которому хотите перейти после каждого append и before и возьмите top этого обьекта.NeXan,
success: function (newComment) {
  var top = 0;
  // Если уже есть какие-то комментарии
  if($('.commentlist').length > 0){

    // Если текущий комментарий является ответом
    if($('#respond').parent().hasClass('comment')){

      // Если уже есть какие-то ответы
      if($('#respond').parent().children('.children').length){
         $('#respond').parent().children('.children').append(newComment);
         top = $('#respond').parent().children('.children').find("чёрт знет что").offset().top;
      } else {

         // Если нет, то добавляем  <ul class="children">
         newComment = '<ul class="children ajax-com">'+newComment+'</ul>';
         $('#respond').parent().append(newComment);
         top = $('#respond').parent().find(".children.ajax-com").offset().top;
      }

       // закрываем форму ответа
       $("#cancel-comment-reply-link").trigger("click");

    } else {

        // обычный коммент
  $('.commentlist').append(newComment);
  top = $('.commentlist').find("чёрт знет что").offset().top;
     }

  }else{

      // если комментов пока ещё нет, тогда
      newComment = '<ol class="commentlist">'+newComment+'</ol>';
     $('#respond').before($(newComment));
     top = $('.commentlist').offset().top;
  }
     $('body,html').animate({scrollTop: top}, 2000);
     // очищаем поле textarea
     $('#comment').val('');

  },


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