Выделите div с помощью jquery

Ответ 1

Во-первых, ваш код не содержит contact блок, он имеет contacts блок!

В боковой панели у вас есть contact в DIV внизу страницы у вас есть contacts. Я удалил последние s для примера кода. (вы также неправильно написали id ссылки projectslink на боковой панели).

Во-вторых, взгляните на некоторые примеры, нажав на справочную страницу jQuery. Вы должны использовать click like, object.click( function() {//Your code here } ); чтобы привязать обработчик события click к объекту.... Как в моем примере ниже. Кроме того, вы также можете просто инициировать щелчок по объекту, используя его без аргументов, например, object.click().

В-третьих, scrollTo - это плагин в jQuery. Я не знаю, установлен ли у вас плагин. Вы не можете использовать scrollTo() без плагина. В этом случае желаемая функциональность составляет всего 2 строки кода, поэтому я не вижу смысла использовать плагин.

Хорошо, теперь к решению.

Код ниже будет прокручиваться до правильного div, если вы нажмете ссылку на боковой панели. Окно должно быть достаточно большим для прокрутки:

// This is a functions that scrolls to #{blah}link
function goToByScroll(id) {
    // Remove "link" from the ID
    id = id.replace("link", "");
    // Scroll
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}

$("#sidebar > ul > li > a").click(function(e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

Живой пример

(Прокрутите до функции, взятой отсюда)

PS: Очевидно, у вас должна быть веская причина для того, чтобы пойти по этому пути, вместо того, чтобы использовать теги привязки <a href="#gohere">blah</a>... <a name="gohere">blah title</a>

Ответ 2

В jQuery нет метода .scrollTo(), но существует .scrollTop(). .scrollTop ожидает параметр, то есть значение пикселя, в котором должна прокручиваться полоса прокрутки.

Пример:

$(window).scrollTop(200);

прокрутит окно (если в нем будет достаточно содержимого).

Таким образом, вы можете получить это желаемое значение с помощью .offset() или .position().

Пример:

$(window).scrollTop($('#contact').offset().top);

Это должно прокрутить элемент #contact в представлении.

Альтернативный метод non-jQuery .scrollIntoView(). Вы можете вызвать этот метод для любого DOM element, например:

$('#contact')[0].scrollIntoView(true);

true указывает, что элемент расположен сверху, а false - в нижней части представления. Хорошая вещь с помощью метода jQuery, вы можете даже использовать его с fx functions как .animate(). Таким образом, вы можете сгладить прокрутку.

Ссылка: . scrollTop(), . position(), . offset()

Ответ 3

вы можете попробовать:

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});

Ответ 4

Добавьте эту небольшую функцию и используйте ее так: $('div').scrollTo(500);

jQuery.fn.extend(
{
  scrollTo : function(speed, easing)
  {
    return this.each(function()
    {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});

Ответ 5

ОК, ребята, это небольшое решение, но оно отлично работает.

предположим следующий код:

<div id='the_div_holder' style='height: 400px; overflow-y: scroll'>
  <div class='post'>1st post</div>
  <div class='post'>2nd post</div>
  <div class='post'>3rd post</div>
</div>

вы хотите, когда новое сообщение добавляется в 'the_div_holder', тогда он прокручивает свой внутренний контент (div.post) до последнего, как чат. Итак, делайте следующее при каждом добавлении нового .post в основной держатель div:

var scroll = function(div) {
    var totalHeight = 0;
    div.find('.post').each(function(){
       totalHeight += $(this).outerHeight();
    });
    div.scrollTop(totalHeight);
  }
  // call it:
  scroll($('#the_div_holder'));

Ответ 6

Сначала получите позицию элемента div, до которого вы хотите прокручивать методом jQuery position().
 Пример: var pos = $( "div" ). Position();
Затем введите y cordinates (height) этого элемента с помощью метода < .top ". Пример: pos.top;
Затем возьмите x cordinates этого элемента div с помощью метода < .left.
 Эти методы основаны на позиционировании CSS.
 Как только мы получим х и у корни, тогда мы можем использовать метод javascript scrollTo();.
Этот метод прокручивает документ до определенной высоты и ширины.
Он принимает два параметра, когда х и у корнится. Синтаксис: window.scrollTo(x, y);
Затем просто передайте корни x и y элемента DIV в функции scrollTo().
См. пример ниже & darr; & Дарр;

<!DOCTYPE HTML>
    <html>
    <head>
        <title>
            Scroll upto Div with jQuery.
        </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#button1").click(function () {
                    var x = $("#element").position(); //gets the position of the div element...
                    window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position....
                    //it takes 2 parameters : (x axis cordinate, y axis cordinate);
                });
            });
            </script>
    </head>
    <body>
        <button id="button1">
            Click here to scroll
        </button>

        <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;">
            The DIV element.
            </div>
        </body>
    </html>

Ответ 7

Не нужно тоже это. Просто добавьте div id в href тега <a>

<li><a id = "aboutlink" href="#about">auck</a></li>

Просто так.