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

Я пытался использовать прокрутку страницы 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;
});

Надеюсь, идея понятна.

Спасибо

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

Ответы

Ответ 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. Dunno об IE, хотя.

Ответ 2

В ссылке помещен хэш:

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

И на другой странице вы можете:

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

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

Ответ 3

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

На странице1.html:

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

На странице2.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>

Ответ 4

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

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

Вы можете установить scrollto с помощью селектора jquery css.

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

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

Ответ 5

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

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

Ответ 6

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

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. Теперь я не мог легко протестировать это в то время, но недавно сделал подобные вещи для производственных площадок, если это не сразу работает, дайте мне знать, и я рассмотрю решение, которое я получил там.

(script должен находиться в секции onload)

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

Затем мы привязываем плагин к onclick якорей, которые содержат только хэш в свой атрибут href.

(script должен находиться в секции onload)

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

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

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

Обновление

Альтернативный обработчик 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/

Обновление 2

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

Ответ 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;
  });
});