Как прокрутить HTML-страницу до заданного якоря?
Я хотел бы сделать браузер для прокрутки страницы до заданного якоря, просто используя JavaScript.
я указал name
или id
атрибут в моем HTML-коде:
<a name="anchorName">..</a>
или
<h1 id="anchorName2">..</h1>
Я хотел бы получить тот же эффект, что и вы, перейдя в http://server.com/path#anchorName
. Страница должна быть прокручена так, чтобы якорь находился в верхней части видимой части страницы.
14 ответов
способ проще:
var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();
вы можете использовать jQuerys .animate (), .offset () и scrollTop
. Как
$(document.body).animate({
'scrollTop': $('#anchorName2').offset().top
}, 2000);
пример ссылки: http://jsbin.com/unasi3/edit
если вы не хотите анимировать использование .scrollTop() как
$(document.body).scrollTop($('#anchorName2').offset().top);
или javascripts родной location.hash
как
location.hash = '#' + anchorid;
отличное решение от jAndy, но гладкая прокрутка, похоже, имеет проблемы с работой в firefox.
это работает в Firefox.
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#anchorName2').offset().top
}, 2000);
});
})(jQuery);
чистое решение javascript без JQuery. Протестировано на Chrome & I. e, не протестировано на IOS
function ScrollTo(name) {
ScrollToResolver(document.getElementById(name));
}
function ScrollToResolver(elem) {
var jump = parseInt(elem.getBoundingClientRect().top * .2);
document.body.scrollTop += jump;
document.documentElement.scrollTop += jump;
if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
elem.lastjump = Math.abs(jump);
setTimeout(function() { ScrollToResolver(elem);}, "100");
} else {
elem.lastjump = null;
}
}
$(document).ready ->
$("a[href^='#']").click ->
$(document.body).animate
scrollTop: $($(this).attr("href")).offset().top, 1000
большинство ответов излишне сложны.
Если вы просто хотите прыжок для целевого элемента, вам не нужно JavaScript:
# the link:
<a href="#target">Click here to jump.</a>
# target element:
<div id="target">Any kind of element.</div>
Если вы хотите прокрутите до цели animatedly, пожалуйста, обратитесь к ответу @Shahil.
решение из CSS-трюков больше не работает в jQuery 2.2.0. Он выдаст ошибку селектора:
JavaScript runtime error: синтаксическая ошибка, нераспознанное выражение: a[href*=#]: not ([href=#])
я исправил это, изменив селектор. Полный фрагмент таков:
$(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
}, 1000);
return false;
}
}
});
});
в 2018 году вам не нужен jQuery для чего-то простого, как это. Встроенный [scrollIntoView()][1]
метод поддерживает "behavior
" свойство для плавной прокрутки до любого элемента на странице. Вы даже можете обновить URL браузера с хэшем, чтобы сделать его заметным.
С этот учебник по прокрутке HTML-закладок, вот родной способ добавить плавную прокрутку ко всем ссылкам привязки на Вашей странице автоматически:
let anchorlinks = document.querySelectorAll('a[href^="#"]')
for (let item of anchorlinks) { // relitere
item.addEventListener('click', (e)=> {
let hashval = item.getAttribute('href')
let target = document.querySelector(hashval)
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
})
history.pushState(null, null, hashval)
e.preventDefault()
})
}
2018 Pure js:
существует очень удобный способ прокрутки до элемента:
el.scrollIntoView({
behavior: 'smooth', // smooth scroll
block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})
но, насколько я понимаю, у него нет такой хорошей поддержки, как варианты ниже.
если необходимо, чтобы элемент находился в верхней части:
const element = document.querySelector('#element')
const top = element.getBoundingClientRect().top
window.scrollTo({
top, // scroll so that the element is at the top of the view
behavior: 'smooth' // smooth scroll
})
демонстрационный пример Сайт CodePen
если вы хотите, чтобы элемент был в центре:
const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.scroll({
top: rect.top + rect.height / 2 - viewHeight / 2,
behavior: 'smooth' // smooth scroll
});
демонстрационный пример на Codepen
поддержка:
они пишут, что scroll
Это тот же метод, что и scrollTo
, но поддержка лучше в scrollTo
.
Я знаю, что это вопрос действительно старый, но я нашел простое и простое решение jQuery в модели CSS-уловок, которые. Это то, что я использую сейчас.
$(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
}, 1000);
return false;
}
}
});
});
Это рабочий скрипт, который будет прокручивать страницу к якорю. Чтобы настроить, просто дайте привязке привязки идентификатор, соответствующий атрибуту name привязки,к которой вы хотите прокрутить.
<script>
jQuery(document).ready(function ($){
$('a').click(function (){
var id = $(this).attr('id');
console.log(id);
if ( id == 'cet' || id == 'protein' ) {
$('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow');
}
});
});
</script>
это работает:
$('.scroll').on("click", function(e) {
e.preventDefault();
var dest = $(this).attr("href");
$("html, body").animate({
'scrollTop': $(dest).offset().top
}, 2000);
});
https://jsfiddle.net/68pnkfgd/
просто добавьте класс 'scroll' к любым ссылкам, которые вы хотите анимировать
jQuery("a[href^='#']").click(function(){
jQuery('html, body').animate({
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
}, 1000);
return false;
});