Прокрутите до элемента div, используя jquery
, поэтому у меня есть страница с фиксированной панелью ссылок сбоку. Я хотел бы перейти к различным разделам. По сути, это всего лишь один длинный веб-сайт, на котором я бы хотел прокрутить список страниц, используя боковое меню.
Вот jquery, который у меня есть до сих пор.
$(document).ready(function() {
$('#contactlink').click = function() {
$(document).scrollTo('#contact');
}
});
Проблема в том, что он автоматически переходит к контакту div, когда он загружается, затем, когда я нажимаю #contactlink в меню, оно прокручивается обратно к top.
РЕДАКТИРОВАТЬ: 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>
Спасибо за помощь
3 ответа
Во-первых, в вашем коде нет contact div, а есть contacts div!
В sidebar у вас contact, в div внизу страницы у вас contacts. Я удалил последние s для примера кода. (Вы также неправильно написали projectlink id в боковой панели).
Во-вторых, посмотрите на некоторые примеры для click на справочной странице jQuery. Вы должны использовать click как, object.click( function() { // Ваш код здесь } ); для того, чтобы привязать обработчик события click к объекту..... Как в моем примере ниже. В качестве дополнения, вы также можете просто вызвать клик на объекте, используя его без аргументов, как object.click().
В-третьих, scrollTo - это плагин в jQuery. Я не знаю, установлен ли у вас этот плагин. Вы не можете использовать scrollTo() без плагина. В данном случае желаемая вами функциональность состоит всего из 2 строк кода, поэтому я не вижу причин использовать плагин.
Хорошо, теперь перейдем к решению.
Код, приведенный ниже, прокрутит окно до нужного div, если вы щелкните ссылку в боковой панели. The window does have to be big enough to allow scrolling:
// 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);
});
( Scroll to function taken from here )
PS: Obviously you should have a compelling reason to go this route instead of using anchor tags blah ... blah title
В jQuery нет метода .scrollTo () , но есть метод .scrollTop () . .scrollTop ожидает параметр, то есть значение пикселя, до которого должна прокручиваться полоса прокрутки.
Пример:
$(window).scrollTop(200);
будет прокручивать окно (если в нем достаточно содержимого).
Таким образом, вы можете получить это желаемое значение с помощью .offset () или .position () .
Пример:
$(window).scrollTop($('#contact').offset().top);
Это должно прокрутить элемент #contact в поле зрения.
Альтернативный метод, отличный от jQuery, - .scrollIntoView () . Вы можете вызвать этот метод для любого элемента DOM , например:
$('#contact')[0].scrollIntoView(true);
true указывает, что элемент расположен вверху, тогда как false поместит его в нижнюю часть представления. . Хорошая вещь с методом jQuery заключается в том, что вы даже можете использовать его с функциями fx , такими как .animate () . Так что вы можете что-нибудь плавно прокрутить.
Ссылка: .scrollTop () , .position () , .offset ()
Добавьте эту маленькую функцию и используйте ее следующим образом: $('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);
});
}
});