如何将 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

您可以使用 jQuery 的 .animate()、.offset() 和 scrollTop。示例

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

链接：http://jsbin.com/unasi3/edit

如果您不想动画，使用 .scrollTop() ，例如：

$(document.body).scrollTop($('#anchorName2').offset().top);

或 JavaScript 的本机 location.hash 喜欢：

location.hash = '#' + anchorid;

Answer 4

2018年至今纯JavaScript：

有一种非常方便的方式滚动到元素：

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 topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // 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 5

jAndy 的解决方案 ，但平滑滚动似乎在 Firefox 中出现问题。

这种方式在 Firefox 中也适用。

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

Answer 6

让浏览器将页面滚动到给定锚点的最简单方法是在 style.css 文件中添加 *{scroll-behavior: smooth;} 和您的 HTML 导航使用 #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 7

在 2018 年，你不需要 jQuery 来完成这样简单的事情。内置的 scrollIntoView()方法支持“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

这是一个没有 jQuery 的纯 JavaScript 解决方案。它已在 Chrome 和 Internet Explorer 上进行了测试，但未在 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 9

平滑滚动到正确位置

获取正确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'});

Answer 10

大多数答案都过于复杂。

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

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

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

如果您想动画滚动到目标，请参考5hahiL的回答。

Answer 11

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

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

Answer 13

这有效：

$('.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”类添加到任何链接你想要动画

Answer 14

jQuery("a[href^='#']").click(function(){
    jQuery('html, body').animate({
        scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
    }, 1000);
    return false;
});

Answer 15

这是一个可以将页面滚动到锚点的工作脚本。
要进行设置，只需为锚点链接提供一个与您要滚动到的锚点的名称属性相匹配的 id 即可。

<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>

Answer 16

我发现了一个简单的 CSS-Tricks 上的 jQuery 解决方案。我现在用的就是这个。

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

Answer 17

Vue.js 2 解决方案...添加一个简单的数据属性来简单地强制更新：

  const app = new Vue({
  ...

  , updated: function() {
           this.$nextTick(function() {
           var uri = window.location.href
           var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
           if ( String(anchor).length > 0 && this.updater === 'page_load' ) {
              this.updater = "" // only on page-load !
              location.href = "#"+String(anchor)
           }
         })
        }
     });
     app.updater = "page_load"

 /* Smooth scrolling in CSS - it works in HTML5 only */
 html, body {
     scroll-behavior: smooth;
 }

Answer 18

假设我们有一个 id 为“hero”的元素。页面上任意位置的按钮，其 ID 为“skip”。

在JS中：

const btn = document.querySelector('#skip')
let skipto = document.querySelector('#hero')
skipto.scrollIntoView({ behavior: "smooth" })