如何将HTML页面滚动到给定的锚点？

Question

我想让浏览器将页面滚动到给定的锚点,只需使用JavaScript即可.

我在HTML代码中指定了一个name或id属性:

 <a name="anchorName">..</a>

要么

 <h1 id="anchorName2">..</h1>

我希望通过导航获得与您相同的效果http://server.com/path#anchorName.应滚动页面,使锚点靠近页面可见部分的顶部.

Answer 1

function scrollTo(hash) {
    location.hash = "#" + hash;
}

根本不需要jQuery!

Answer 2

方式更简单:

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

Answer 3

您可以使用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;

Answer 4

jAndy提供了很好的解决方案,但顺畅的滚动似乎在firefox中有问题.

以这种方式编写它也适用于Firefox.

(function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);

Answer 5

没有JQuery的纯JavaScript解决方案.在Chrome&Ie上测试过,未在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;
  }
}

演示:https://jsfiddle.net/jd7q25hg/12/

Answer 6

2018年纯粹的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.pageYOffset

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.

更多关于该方法

Answer 7

在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()
    })
}

Answer 8

让浏览器将页面滚动到给定锚点的最简单方法是*{scroll-behavior: smooth;}在style.css文件和 HTML 导航中添加 use #NameOfTheSection。

*{scroll-behavior: smooth;}

<a href="#scroll-to">Click to Scroll<a/>

<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>

<section id="scroll-to">
<p>it will scroll down to this section</p>
</section>

Answer 9

平滑滚动到正确位置（2019）

获取正确的 y坐标并使用window.scrollTo({top: y, behavior: 'smooth'})

const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;

window.scrollTo({top: y, behavior: 'smooth'});

有偏移

scrollIntoView也是一个不错的选择，但在某些情况下可能无法完美运行。例如，当您需要其他偏移量时。与scrollTo您只需要添加这样的偏移量：

const yOffset = -10; 

window.scrollTo({top: y + yOffset, behavior: 'smooth'});

Answer 10

$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000

Answer 11

大多数答案都不必要地复杂化.

如果您只想跳转到目标元素,则不需要JavaScript:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

如果您想要动画滚动到目标,请参阅@ Shahil的答案.

Answer 12

CSS-Tricks的解决方案不再适用于jQuery 2.2.0.它会抛出一个选择器错误:

JavaScript运行时错误:语法错误,无法识别的表达式: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;
    }
  }
 });
});