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

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() - вам нужно будет сделать это асинхронно
• in jump(), если событие не задано, сделать location.hash target
• также этот метод может не уловить скачок во времени, поэтому вам лучше сразу спрятать 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

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

На 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 4

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

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

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

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

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

Answer 5

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

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

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

(скрипт должен находиться в разделе загрузки)

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

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

(скрипт должен находиться в разделе загрузки)

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

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

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

Обновление

Альтернативный обработчик onclick для прокрутки вверх, когда есть только хеш:

$('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, который демонстрирует прокрутку внутри страницы, настройка загрузки немного сложна ...

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

Обновление 2

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

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;
  });
});