Плавная прокрутка до div id jQuery


248

Я пытался заставить прокрутить код div id jquery для правильной работы. Основываясь на другом вопросе переполнения стека, я попробовал следующее

ДЕМО http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

Но это не сработало. Это просто привязка к div. Я тоже пробовал

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

Без прогресса.


1
Вы смотрели на это? stackoverflow.com/questions/3432656/…
The Vanilla Thrilla

@TheVanillaThrilla Я сделал, но это показалось слишком раздутым для использования одной ссылки
StevenPHP

1
@ StevenPHP, я заменил код JavaScript в вашем примере в соответствии с моим ответом stackoverflow.com/a/26129950/947687 . И это работает jsfiddle.net/8tLdq/643 .
dizel3d

ОП старая, но я поделюсь этим постом для других, пришедших из SE. Вот статья с простой функцией решения проблемы: smartik.ws/2015/01/…
Эндрю Сурду,

Ответы:


667

Вам нужно оживить html, body

ДЕМО http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

9
@vector У меня есть одна проблема, после того, как она нажата, мне нужно бороться с jquery, чтобы прокрутить, какое-нибудь решение?
YesItsMe

@yesitsme ... вверх или вниз в моем случае
Серый Спектр

@GraySpectrum up, только сразу после нажатия, звучит как задержка.
YesItsMe

1
У меня тот же вопрос, что если у меня есть несколько кнопок, которые нужно прокрутить в разные места, попытался изменить этот код, но он не работает. Не могли бы вы привести еще один пример?
Повелитель ужасов

Нашел какое-то "исправление" для этого. Прокрутка нужного элемента теперь исправлена, но все же она идет вверх и вниз, нажимая на ту же цель «прокрутки до»: var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });Объяснение: .basics-contentэто внутренний div модала, к которому я на самом деле хочу перейти, с targetуказанием номера идентификатора элемента ...
Роланд

111

Если вы хотите переопределить стандартную навигацию href-id на странице без изменения разметки HTML для плавной прокрутки , используйте это ( пример ):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

3
Это хорошо работает, я могу предложить очень маленький твик var pos = $(id).offset().top;может бытьvar pos = $id.offset().top;
Дэви

Очень хорошо. Если вы хотите, чтобы это происходило только с определенными ссылками (скажем, у вас есть некоторые, чтобы показать или скрыть информацию), просто добавьте к ним имя класса и добавьте имя вашего класса (скажем, скроллер) в конец объявления соответствия (например, [href ^ = "#"]. скроллер).
Privateer

Как вы делаете это без JQuery?
Вадореквест

21

вот мои 2 цента:

Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

Html:

<a class="scroll" target="contact">Contact</a>

и цель:

<h2 id="contact">Contact</h2>

Это работает, только если вы не объявляете тип документа.
Дэвид Мартинс

6
Для чего evalздесь нужен?
Провидец

Я думаю, что это необходимо $('html, body').animateдля прокрутки
Иршад Хан

6

Вот что я использую:

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

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

Если вы используете WordPress, вставьте код в footer.phpфайл вашей темы прямо перед закрывающим тегом body </body>.

Если у вас нет доступа к файлам темы, вы можете встроить код прямо в редактор постов / страниц (вы должны редактировать пост в текстовом режиме) или в текстовый виджет, который будет загружаться на всех страницах.

Если вы используете любую другую CMS или просто HTML, вы можете вставить код в раздел, который загружается на всех страницах прямо перед закрывающим тегом body </body>.

Если вам нужна более подробная информация об этом, посмотрите мой быстрый пост здесь: jQuery smooth прокрутка до id

Надеюсь, это поможет, и дайте мне знать, если у вас есть вопросы по этому поводу.


Любить, как это просто и ванильно, идеально.
DoPeT

5

еще один пример:

HTML-ссылка:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML-якорь:

  <div id="featured">My content here</div>

3

Вы уверены, что загружаете файл плагина jQuery scrollTo?

Возможно, вы получаете объект: метод не найден «scrollTo» ошибка в консоли.

метод scrollTO не является родным методом jquery. чтобы использовать его, вам нужно включить jquery scroll To плагин файл.

ссылка: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

Soln: добавить это в разделе заголовка.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

Это должен был быть принятый ответ. Код в вопросе правильный и работает нормально. Похоже, что плагин scrollTo не / не работает. , Он не спрашивал о разных способах сделать что-то подобное.
Крис Кавана

3

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

Сначала без ослабления:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

Для облегчения вам понадобится Jquery UI:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Добавьте это к сценарию:

'easeOutExpo'

окончательный

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

Все слабости вы можете найти здесь: Шпаргалка .


3

Этот код будет полезен для любой внутренней ссылки в Интернете.

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });


1

Вы можете сделать это, используя следующий простой код jQuery.

Учебник, Демонстрация и Исходный код могут быть найдены здесь - Плавная прокрутка к div с использованием jQuery

JavaScript:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

1

Здесь я попробовал это, это отлично работает для меня.

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

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

Чем отличается ваш ответ?
yunandtidus


0

Это работает для меня.

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

Спасибо.


0

Вот мое решение для плавной прокрутки к div / anchor с использованием jQuery в случае, если у вас есть фиксированный заголовок, чтобы он не прокручивался под ним. Также это работает, если вы ссылаетесь на другую страницу.

Просто замените ".site-header" на div, который содержит ваш заголовок.

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

  if (target.length) {
    $('html, body').animate({
      scrollTop: (target.offset().top - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.