Прокрутите до Одной записи

Question

В настоящее время я разрабатываю веб-сайт на Wordpress, который требует своего рода гибкой одностраничной разметки.

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

Это справочный сайт, демонстрирующий эту функцию - Nike Free Voice ,В основном происходит то, что если вы щелкнете по изображению, сайт прокрутится вниз, чтобы показать фактическую статью / публикацию.

Я полагаю, что наиболее подходящим способом является использование AJAX для загрузки контента в DIV.а затем JQUERY, чтобы прокрутить страницу вниз к этому конкретному DIV.Здесь возникает вопрос: как мне это сделать?

Я также рассмотрел прокрутку вниз до IFRAME, но ориентация на источник IFRAME для файла single.php или фактическая постоянная ссылка не сработает - сделать это дляпервый просто отображает ошибку, а для второго это означает, что загруженный контент не является динамическим, поскольку он является абсолютной ссылкой на постоянную ссылку.

Действительно надеюсь, что кто-то из окружающих поймет, с чего начать.

Заранее спасибо, ребята!

PS: я не опубликовал ни одного примера кода, потому что инфраструктура Wordpress в значительной степени стандартна.На самом деле это просто вопрос загрузки нужного отдельного контента и последующей прокрутки к нему.

Answer 1

Эта функция принимает целевой элемент, который должен быть div, содержащим сообщение, и продолжительность, если вы хотите анимировать прокрутку.

function scrollToElement(element, duration){
 var verticalScrollTarget = element.offset().top;
 if(typeof duration == 'undefined'){
    $('html,body').scrollTop(verticalScrollTarget);
  }else{
    $(($('html').scrollTop() != 0 ? 'html':'body')).animate({scrollTop: verticalScrollTarget}, duration)
  }
}

Пример:

    $.ajax({ 
      url: '/someurl',
      success : function(response){
         var target = $('div',response);
         $('#somePostList').append(response);
         scrollToElement(target, 1000);
      });

Answer 2

Как насчет установки якоря в нужном месте, а затем перехода к нему?

<a name="someDiv">
<div><img ... ></div>

И для перехода к нему:

window.location.hash="someDiv";

Это даже закладка!

Answer 3

Я решил эту проблему в другом посте ( Загрузка контента Wordpress в DIV с использованием AJAX / JQUERY ), который был специально нацелен на загрузку контента с использованием AJAX и JQUERY на основе Эмануэле Феронато.сообщение