JQuery: как прокручивать определенные привязки /div на загрузку страницы?

В последнее время я пытаюсь использовать jquery чаще и прямо сейчас, имея некоторую проблему, которую я бы хотел решить с помощью jquery hope u, которая могла бы помочь мне.

У меня есть веб-страница, содержащая некоторый якорный тэг (скажем, якорь расположен в середине страницы), а в событии onload я хочу, чтобы страница начиналась с определенного местоположения тега привязки, что означает, что страница будет "прокручивается" автоматически в определенном месте.

Это было мое предыдущее решение (что довольно уродливо, так как оно добавляет #i к моему URL-адресу)

window.onload = window.location.hash = 'i';

В любом случае, можно ли мне сказать, как я могу это сделать с помощью jquery?

уведомление: я не хочу, чтобы пользователь чувствовал какой-либо слайд или эффект, когда попадал в это место

Ответ 1

Используйте следующий простой пример

function scrollToElement(ele) {
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
}

где ele - ваш элемент (jQuery).. например: scrollToElement($('#myid'));

Ответ 2

Нет необходимости использовать jQuery, потому что это встроенная функция JavaScript

element.scrollIntoView()

Ответ 3

Я пробовал несколько часов, и самый простой способ остановить браузеры, чтобы перейти к якорю вместо прокрутки к нему: Использование другого привязки (идентификатор, который вы не используете на сайте). Поэтому вместо ссылки на "http://# YourActualID" вы ссылаетесь на "http://# NoIDonYourSite". Poof, браузеры больше не будут прыгать.

Затем просто проверьте, установлен ли якорь (с приведенным ниже script, который вытащен из другого потока!). И установите свой фактический идентификатор, который вы хотите прокрутить.

$(document).ready(function(){


  $(window).load(function(){
    // Remove the # from the hash, as different browsers may or may not include it
    var hash = location.hash.replace('#','');

    if(hash != ''){

       // Clear the hash in the URL
       // location.hash = '';   // delete front "//" if you want to change the address bar
        $('html, body').animate({ scrollTop: $('#YourIDtoScrollTo').offset().top}, 1000);

       }
   });
});

См. http://pro.lightningsoul.com/?c=media&sc=article&cat=coding&id=30#content для рабочего примера.

Ответ 4

Посмотрите this

Добавление # значения в адрес по умолчанию - это поведение браузеров, таких как IE, для определения названных позиций привязки на странице, поскольку это происходит из Netscape.

Вы можете перехватить его и удалить, прочитайте эту статью.

Ответ 5

    /* START --- scroll till anchor */
        (function($) {
             $.fn.goTo = function() {
                  var top_menu_height=$('#div_menu_header').height() + 5 ;
                  //alert ( 'top_menu_height is:' + top_menu_height );
                  $('html, body').animate({
                        scrollTop: (-1)*top_menu_height + $(this).offset().top + 'px'
                  }, 500);
                  return this; // for chaining...
             }
        })(jQuery);

        $(document).ready(function(){

          var url = document.URL, idx = url.indexOf("#") ;
          var hash = idx != -1 ? url.substring(idx+1) : "";

          $(window).load(function(){
             // Remove the # from the hash, as different browsers may or may not include it
             var anchor_to_scroll_to = location.hash.replace('#','');
             if ( anchor_to_scroll_to != '' ) {
                 anchor_to_scroll_to = '#' + anchor_to_scroll_to ;
                 $(anchor_to_scroll_to).goTo();
             }
            });
        });
    /* STOP --- scroll till anchror */

Ответ 6

Я достигаю этого вот так.

if(location.pathname == '/registration')
{
$('html, body').animate({ scrollTop: $('#registration').offset().top - 40}, 1000);
}

Ответ 7

просто используйте плагин scrollTo

$("document").ready(function(){
  $(window).scrollTo("#div")
})

Ответ 8

Просто добавьте #[id of the div you want to scroll to] к URL-адресу своей страницы. Например, если бы я хотел прокрутить до раздела об авторских правах этого вопроса stackoverflow, URL изменился бы с

http://stackoverflow.com/info/9757625/jquery-how-to-scroll-to-certain-anchor-div-on-page-load

http://stackoverflow.com/info/9757625/jquery-how-to-scroll-to-certain-anchor-div-on-page-load#copyright