Нажмите тег привязки, перейдите на новую страницу, затем выделите ID с этой страницы [дубликат]

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

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

Вы можете set scrollto с помощью jquery css selector.

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

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

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

$('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;
  });
});

На ссылке помещается хэш:

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

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

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

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

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

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 ничего не делает, если само совпадение не выполняется, у нас есть хороший резерв, когда цель на странице не может быть найдена 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); он просто прокручивает страницу влево. Добавили его в фрагмент кода выше.

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

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

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

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