Выделите div, используя jquery

171

поэтому у меня есть страница, на которой есть фиксированная панель ссылок. Я бы хотел прокрутить список до разных div. В основном страница - это только один длинный веб-сайт, где я бы хотел прокрутить список до разных разделов, используя окно меню в сторону. Вот jquery, который у меня есть до сих пор

 $(document).ready(function() {

 $('#contactlink').click = function (){
  $(document).scrollTo('#contact');
 } 

 });

Проблема в том, что он автоматически переходит в контактный div, когда он загружается, а затем, когда я нажимаю #contactlink в меню, он прокручивается назад.

EDIT: HTML

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">

    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>

    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />    

    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>                       

    <!-- page title-->
    <title><!-- Insert Title --></title>


</head>
<body>
    <div id="container">

        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>



    </div>
</body>

Спасибо за помощь

  • 0
    Как выглядит HTML, где должна быть контактная ссылка?
  • 0
    Это может быть дубликатом stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery
Показать ещё 3 комментария
Теги:
scroll

6 ответов

301
Лучший ответ

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

На боковой панели у вас есть contact в div внизу вашей страницы contacts. Я удалил окончательный s для образца кода. (вы также опечатали идентификатор projectslink на боковой панели).

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

В-третьих, scrollTo является plugin в 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);           
});

Пример Live

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

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

Поделиться
  • 0
    Рад, что это помогло, но я думаю, что вы имеете в виду «маринованные», хотя я считаю, что лучше съесть их, чем выбраться из них.
  • 1
    Ссылка не работает
Показать ещё 3 комментария
96

В 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()

Поделиться
  • 0
    Боюсь, у меня все еще есть подобные проблемы. Страница загружается, прокручивая вниз по странице определенное количество, а не контактный блок, и ссылка также не приводит меня к контактному блоку. Спасибо, что. РЕДАКТИРОВАТЬ: скажем, я делаю div с использованием top с css, это приведет к тому, что он перейдет не туда? Просто мысль.
17

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

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});
Поделиться
11

Добавьте эту небольшую функцию и используйте ее так: $('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'));
Поделиться
2

Сначала получите позицию элемента 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>
Поделиться
  • 0
    И сено добавить текстовое объяснение того, что вы сделали, просто не имеет особого смысла .. !!
  • 0
    Как сказал @ClainDsilva, пожалуйста, добавьте текстовое объяснение.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню