jQuery прокрутите до ID от другой страницы

Question

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

Вот код, который я использовал для прокрутки внутри страницы:

var jump=function(e) 
{ 
     //prevent the "normal" behaviour which would be a "hard" jump 
     e.preventDefault(); 
    //Get the target 
    var target = $(this).attr("href"); 
    //perform animated scrolling 
    $('html,body').animate(
    { 
      //get top-position of target-element and set it as scroll target 
      scrollTop: $(target).offset().top 
    //scrolldelay: 2 seconds 
    },2000,function() 
    { 
      //attach the hash (#jumptarget) to the pageurl 
      location.hash = target; 
    }); 

} 

$(document).ready(function() 
{ 
     $('a[href*=#]').bind("click", jump); 
     return false; 
}); 

Я надеюсь, что идея ясна.

Благодаря

Очень важно Примечание: Этот код я разместил выше отлично работает внутри одной и той же странице, но то, что я после нажать на ссылку с одной страницы и перейти на другую, а затем прокручивать к цели. Надеюсь, теперь это ясно. Благодаря

Answer 1

Вы в основном должны сделать это:

• включает целевой хэш в ссылку, указывающий на другую страницу (href="other_page.html#section")
• в вашем ready обработчика очистить жесткий прыжок свитку обычно продиктован хэшем и как можно скорее прокрутить страницу обратно на вершину и назвать jump() - вам нужно сделать, это асинхронно
• в jump(), если событие не дано, сделать location.hash цель
• также этот метод не может поймать прыжок во времени, так что вы будете лучше скрыть html,body сразу и показать его обратно, как только вы прокручивать его обратно к нулю

Это ваш код с вышеизложенным добавил:

var jump=function(e) 
{ 
    if (e){ 
     e.preventDefault(); 
     var target = $(this).attr("href"); 
    }else{ 
     var target = location.hash; 
    } 

    $('html,body').animate(
    { 
     scrollTop: $(target).offset().top 
    },2000,function() 
    { 
     location.hash = target; 
    }); 

} 

$('html, body').hide(); 

$(document).ready(function() 
{ 
    $('a[href^=#]').bind("click", jump); 

    if (location.hash){ 
     setTimeout(function(){ 
      $('html, body').scrollTop(0).show(); 
      jump(); 
     }, 0); 
    }else{ 
     $('html, body').show(); 
    } 
}); 

Проверено, работает в Chrome/Safari, Firefox и Opera. Не знаю об IE.

Answer 2

На ссылке положить хэш:

<a href="otherpage.html#elementID">Jump</a> 

А на другой странице, вы можете сделать:

$('html,body').animate({ 
    scrollTop: $(window.location.hash).offset().top 
}); 

На другой странице, вы должны иметь элемент с идентификатором, установленным в elementID прокрутки к. Конечно, вы можете изменить его имя.

Answer 3

Я хотел бы рекомендовал использовать плагин scrollTo

http://demos.flesler.com/jquery/scrollTo/

Вы можете множество scrollto селектором JQuery CSS.

$('html,body').scrollTo($(target), 800); 

Я имел большой удачи с точностью этого плагина и его методов, где другие способы достижения того же эффекта, как при помощи .offset() или .position() не смогли быть кросс-браузер для меня в прошлом. Не говоря, что вы не можете использовать такие методы, я уверен, что есть способ сделать это кросс-браузер, я только что нашел scrollTo, чтобы быть более надежным.

Answer 4

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

jQuery(function ($) { 

    /** 
    * This small plugin will scrollTo a target, smoothly 
    * 
    * First argument = time to scroll to the target 
    * Second argument = set the hash in the current url yes or no 
    */ 
    $.fn.smoothScroll = function(t, setHash) { 
     // Set time to t variable to if undefined 500 for 500ms transition 
     t = t || 500; 
     setHash = (typeof setHash == 'undefined') ? true : setHash; 

     // Return this as a proper jQuery plugin should 
     return this.each(function() { 
      $('html, body').animate({ 
       scrollTop: $(this).offset().top 
      }, t); 

      // Lets set the hash to the current ID since if an event was prevented this doesn't get done 
      if (this.id && setHash) { 
       window.location.hash = this.id; 
      } 
     }); 
    }; 

}); 

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

(сценарий должен быть в пределах раздела OnLoad)

if (window.location.hash) { 
    window.scrollTo(0,0); 
    $(window.location.hash).smoothScroll(); 
} 

Далее мы привязываем плагин OnClick анкеров, которые содержат только хэш в их HREF атрибута.

(сценарий должен быть в пределах раздела OnLoad)

$('a[href^="#"]').click(function(e) { 
    e.preventDefault(); 

    $($(this).attr('href')).smoothScroll(); 
}); 

Поскольку JQuery ничего не делать, если сам матч не может у нас есть хороший запасной вариант для того, когда цель на странице не могут быть найдены яй \ о/

Update

Alternative OnClick обработчик для прокрутки к вершине, когда Theres только хеш:

$('a[href^="#"]').click(function(e) { 
    e.preventDefault(); 
    var href = $(this).attr('href'); 

    // In this case we have only a hash, so maybe we want to scroll to the top of the page? 
    if(href.length === 1) { href = 'body' } 

    $(href).smoothScroll(); 
}); 

Здесь также простой jsfiddle, который демонстрирует скроллинга внутри страницы, OnLoad немного трудно установить ...

http://jsfiddle.net/sg3s/bZnWN/

Update 2

Таким образом, вы можете получить в проблема с окном, уже прокручивающимся на элемент onload. Это исправляет: window.scrollTo(0,0); просто прокручивает страницу влево. Добавили его в фрагмент кода выше.

Answer 5

function scroll_down(){ 
    $.noConflict(); 
    jQuery(document).ready(function($) { 
     $('html, body').animate({ 
      scrollTop : $("#bottom").offset().top 
     }, 1); 
    }); 
    return false; 
} 

здесь «нижний» - это идентификатор тега div, куда вы хотите прокрутить. Для изменения эффектов анимации вы можете изменить время от «1» до другого значения

Answer 6

Объединив ответы Петра и Сарфраза, я прихожу к следующему.

На page1.html:

<a href="page2.html#elementID">Jump</a> 

На page2.html:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('html, body').hide(); 

     if (window.location.hash) { 
      setTimeout(function() { 
       $('html, body').scrollTop(0).show(); 
       $('html, body').animate({ 
        scrollTop: $(window.location.hash).offset().top 
        }, 1000) 
      }, 0); 
     } 
     else { 
      $('html, body').show(); 
     } 
    }); 
</script> 

Answer 7

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

$('a[href*=\\#]').on('click',function(e) { 

    var target = this.hash; 
    var $target = $(target); 
    console.log(targetname); 
    var targetname = target.slice(1, target.length); 

    if(document.getElementById(targetname) != null) { 
     e.preventDefault(); 
    } 
    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top-120 //or the height of your fixed navigation 

    }, 900, 'swing', function() { 
     window.location.hash = target; 
    }); 
});