У меня есть несколько гиперссылок на моей странице. FAQ, который пользователи будут читать, когда они посещают раздел справки.
Используя привязки привязки, я могу сделать страницу прокруткой к якорю и вести там пользователей.
Есть ли способ сделать эту прокрутку гладкой?
Но обратите внимание, что он использует пользовательскую библиотеку JavaScript. Может быть, jQuery предлагает такие вещи, как этот, испеченный в?
Обновление апреля 2018 года: теперь есть родной способ сделать это:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
В настоящее время это поддерживается только в самых передовых браузерах.
Для поддержки старых браузеров вы можете использовать эту технику jQuery:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
И вот скрипка: http://jsfiddle.net/9SDLw/
Если у вашего целевого элемента нет идентификатора, и вы ссылаетесь на него по его name, используйте это:
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
Для повышения производительности вы должны кэшировать этот селектор $('html, body'), чтобы он не запускался каждый раз при щелчке привязки:
var $root = $('html, body');
$('a[href^="#"]').click(function () {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
Если вы хотите, чтобы URL обновить, сделать это в animate обратного вызова:
var $root = $('html, body');
$('a[href^="#"]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
Правильный синтаксис:
//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
$('html,body').animate({scrollTop:$(location.hash).offset().top}, 500);
});
Упрощение: СУХОЙ
function smoothScrollingTo(target){
$('html,body').animate({scrollTop:$(target).offset().top}, 500);
}
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
smoothScrollingTo(this.hash);
});
$(document).ready(function(){
smoothScrollingTo(location.hash);
});
Объяснение href*=\\#:
* означает, что соответствует тому, что содержит # char. Таким образом, только соответствуют якорям. Подробнее о значении этого см. Здесь\\ потому что # - это специальный символ в css-селекторе, поэтому мы должны его избежать.Новая горячность в CSS3. Это намного проще, чем любой метод, перечисленный на этой странице, и не требует JavaScript. Просто введите приведенный ниже код в css, и все внезапные ссылки на места внутри вашей страницы будут иметь плавную прокрутку.
html{scroll-behavior:smooth}
После этого любые ссылки, указывающие на div, будут плавно переходить в эти разделы.
<a href="#section">Section1</a>
Кстати, я часами пытался заставить это работать. Нашел решение в каком-то непонятном разделе комментариев. Он был глючным и не работал в некоторых тегах. Не работал в теле. Наконец-то это сработало, когда я поместил его в html {} в файле CSS.
$('a[href*=#]').click(function(event){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
event.preventDefault();
});
это сработало идеально для меня
Я удивлен, что никто не опубликовал собственное решение, которое также заботится об обновлении хеша браузера, чтобы он соответствовал. Вот:
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()
})
}
Смотрите учебное пособие: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml
Я предлагаю вам сделать этот общий код:
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;});
Здесь вы можете увидеть очень хорошую статью: jquery-effet-smooth-scroll-defilement-fluide
$(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;
}
}
});
});
Официальный: http://css-tricks.com/snippets/jquery/smooth-scrolling/
Только CSS
html {
scroll-behavior: smooth !important;
}
Все, что вам нужно добавить только это. Теперь ваша прокрутка внутренних ссылок будет плавной, как поток.
для подробного понимания прочитайте эту статью
Использование JQuery:
$('a[href*=#]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
Здесь уже есть много хороших ответов - однако все они упускают тот факт, что пустые якоря должны быть исключены. В противном случае эти скрипты генерируют ошибки JavaScript, как только щелкает пустой якорь.
На мой взгляд правильный ответ таков:
$('a[href*=\\#]:not([href$=\\#])').click(function() {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
Приведенный ответ работает, но отключает исходящие ссылки. Ниже версии с добавленной бонусной непринужденностью (качели) и уважает исходящие ссылки.
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
HTML
<a href="#target" class="smooth-scroll">
Link
</a>
<div id="target"></div>
или с абсолютным полным URL
<a href="https://somewebsite.com/#target" class="smooth-scroll">
Link
</a>
<div id="target"></div>
JQuery
$j(function() {
$j('a.smooth-scroll').click(function() {
if (
window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&& window.location.hostname == this.hostname
) {
var target = $j(this.hash);
target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$j('html,body').animate({
scrollTop: target.offset().top - 70
}, 1000);
return false;
}
}
});
});
В наши дни современные браузеры немного быстрее. Может работать setInterval. Эта функция хорошо работает в Chrome и Firefox в эти дни. (Немного медленная в сафари, не беспокоила IE)
function smoothScroll(event) {
if (event.target.hash !== '') { //Check if tag is an anchor
event.preventDefault()
const hash = event.target.hash.replace("#", "")
const link = document.getElementsByName(hash)
//Find the where you want to scroll
const position = link[0].getBoundingClientRect().y
let top = 0
let smooth = setInterval(() => {
let leftover = position - top
if (top === position) {
clearInterval(smooth)
}
else if(position > top && leftover < 10) {
top += leftover
window.scrollTo(0, top)
}
else if(position > (top - 10)) {
top += 10
window.scrollTo(0, top)
}
}, 6)//6 milliseconds is the faster chrome runs setInterval
}
}
Существует CSS способ сделать это с помощью scroll-поведения. Добавьте следующее свойство.
scroll-behavior: smooth;
И это все. JS не требуется.
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav, scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
scroll-container {
display: block;
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<scroll-container>
<scroll-page id="page-1">1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container>Добавление этого:
function () {
window.location.hash = href;
}
каким-то образом аннулирует вертикальное смещение
top - 72
в Firefox и IE, но не в Chrome. В принципе, страница прокручивается плавно до точки, в которой она должна останавливаться на основе смещения, но затем переходит к месту, где страница будет идти без смещения.
Он добавляет хэш в конец URL-адреса, но отжатие назад не возвращает вас к вершине, оно просто удаляет хэш из URL-адреса и оставляет окно просмотра, где оно сидит.
Вот полный js, который я использую:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top - 120
}, 500, function () {
window.location.hash = href;
});
return false;
});
Это решение также будет работать для следующих URL-адресов, не нарушая привязки ссылок на разные страницы.
http://www.example.com/dir/index.html
http://www.example.com/dir/index.html#anchor
./index.html
./index.html#anchor
и др.
var $root = $('html, body');
$('a').on('click', function(event){
var hash = this.hash;
// Is the anchor on the same page?
if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
$root.animate({
scrollTop: $(hash).offset().top
}, 'normal', function() {
location.hash = hash;
});
return false;
}
});
Я еще не тестировал это во всех браузерах.
Это позволит легко разрешить jQuery распознавать хеш-объект и знать, когда и где остановиться.
$('a[href*="#"]').click(function(e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
$("a").on("click", function(event){
//check the value of this.hash
if(this.hash !== ""){
event.preventDefault();
$("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);
//add hash to the current scroll position
window.location.hash = this.hash;
}
});
Проверенный и проверенный код
<script>
jQuery(document).ready(function(){
// Add smooth scrolling to all links
jQuery("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
jQuery('html, body').animate({
scrollTop: jQuery(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
Я сделал это для обоих "/xxxxx # asdf" и "#asdf" href anchors
$("a[href*=#]").on('click', function(event){
var href = $(this).attr("href");
if ( /(#.*)/.test(href) ){
var hash = href.match(/(#.*)/)[0];
var path = href.match(/([^#]*)/)[0];
if (window.location.pathname == path || path.length == 0){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
window.location.hash = hash;
}
}
});
Вот решение, которое я реализовал для нескольких ссылок и якорей, для плавного прокрутки:
http://www.adriantomic.se/development/jquery-localscroll-tutorial/ если у вас есть ваши навигационные ссылки, настроенные в навигационном div и объявленные с помощью этой структуры:
<a href = "#destinationA">
и соответствующих назначений тегов привязки как таковые:
<a id = "destinationA">
Затем просто загрузите это в начало документа:
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
// Scroll the whole document
$('#menuBox').localScroll({
target:'#content'
});
});
</script>
Благодаря @Adriantomic
Если у вас есть простая кнопка на странице, чтобы прокрутить вниз до div и хотите, чтобы кнопка назад работала, прыгая вверх, просто добавьте этот код:
$(window).on('hashchange', function(event) {
if (event.target.location.hash=="") {
window.scrollTo(0,0);
}
});
Это можно расширить, чтобы перейти к другим divs, прочитав хэш-значение и прокрутив, как говорит Джозеф Сильберс.
Никогда не забывайте, что функция offset() позволяет документировать позицию вашего элемента. Поэтому, когда вам нужно прокрутить элемент по отношению к его родительскому, вы должны использовать это:
$('.a-parent-div').find('a').click(function(event){
event.preventDefault();
$('.scroll-div').animate({
scrollTop: $( $.attr(this, 'href') ).position().top + $('.scroll-div').scrollTop()
}, 500);
});
Ключевым моментом является получение scrollTop прокрутки-div и добавление его в scrollTop. Если вы не будете делать эту функцию position(), вы всегда будете иметь разные значения позиции.
Вы можете использовать window.scroll() с behavior: smooth и top установленным на вершину смещения тега привязки, которая гарантирует, что тег привязки будет в верхней части области просмотра.
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', function (e) {
e.preventDefault();
var href = this.getAttribute("href");
var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
//gets Element with an id of the link href
//or an anchor tag with a name attribute of the href of the link without the #
window.scroll({
top: elem.offsetTop,
left: 0,
behavior: 'smooth'
});
//if you want to add the hash to window.location.hash
//you will need to use setTimeout to prevent losing the smooth scrolling behavior
//the following code will work for that purpose
/*setTimeout(function(){
window.location.hash = this.hash;
}, 2000); */
});
});
Демо-версия:
a, a:visited{
color: blue;
}
section{
margin: 500px 0px;
text-align: center;
}<a href="#section1">Section 1</a>
<br/>
<a href="#section2">Section 2</a>
<br/>
<a href="#section3">Section 3</a>
<br/>
<a href="#section4">Section 4</a>
<section id="section1">
<b style="font-size: 2em;">Section 1</b>
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.<p/>
<section>
<section id="section2">
<b style="font-size: 2em;">Section 2</b>
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>
<section>
<section id="section3">
<b style="font-size: 2em;">Section 3</b>
<p>
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>
<section>
<a style="margin: 500px 0px; color: initial;" name="section4">
<b style="font-size: 2em;">Section 4 <i>(this is an anchor tag, not a section)</i></b>
</a>
<p>
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.
Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.
Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.
Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.
Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>
<script>
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', function (e) {
e.preventDefault();
var href = this.getAttribute("href");
var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
window.scroll({
top: elem.offsetTop,
left: 0,
behavior: 'smooth'
});
});
});
</script>спасибо, что поделился, Джозеф Силбер. Вот ваше решение 2018 как ES6 с небольшим изменением для поддержания стандартного поведения (прокрутите вверх):
document.querySelectorAll("a[href^=\"#\"]").forEach((anchor) => {
anchor.addEventListener("click", function (ev) {
ev.preventDefault();
const targetElement = document.querySelector(this.getAttribute("href"));
targetElement.scrollIntoView({
block: "start",
alignToTop: true,
behavior: "smooth"
});
});
});
Требуется jquery и анимация для привязки тега с указанным именем вместо id, при добавлении хеша в URL браузера. Также исправляет ошибку в большинстве ответов с jquery, где знак # не имеет префикс с обратной косой чертой. К сожалению, кнопка "Назад" не позволяет правильно вернуться к предыдущим хеш-ссылкам...
$('a[href*=\\#]').click(function (event)
{
let hashValue = $(this).attr('href');
let name = hashValue.substring(1);
let target = $('[name="' + name + '"]');
$('html, body').animate({ scrollTop: target.offset().top }, 500);
event.preventDefault();
history.pushState(null, null, hashValue);
});
jQuery - лучший!
$('a').click(function(){
//code here
});