javascript - 在 anchor 上平滑滚动

Question

我想在单击导航栏中的按钮时添加平滑的滚动效果。跳转到链接但没有流畅的滚动效果

我的部门代码:

<section id="home"></section>

这是与之关联的按钮

<a class="nav-link" href="#home">home</a>

这里有一些我试过但都没有用的 JS 脚本

$(document).ready(function(){
// Add smooth scrolling to all links
$("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's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
} // End if

第二个

$(document).ready(function() {
    // check for hash when page has loaded
    if (getHash() != null) {
        checkForScrolling();
    }
});

// listen for hash change event here
window.onhashchange = function() {
    checkForScrolling();
};

// return hash if so or null if hash is empty
function getHash() {
    var hash = window.location.hash.replace('#', '');
    if (hash != '') {
        return hash;
    } else {
        return null;
    }
}

// this function handles your scrolling
function checkForScrolling() {
    // first get your element by attribute selector
    var elem = $('[data-anchor="' + getHash() + '"]');

    // cheeck if element exists
    if (elem.length > 0) {
        $('html, body').stop().animate({
            scrollTop: elem.offset().top
        }, 300);
    }
}

Answer 1

$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('mouseover', 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's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
} // End if 
});
});

body, html, .main {
    height: 100%;
}

section {
    width:80%;
    height:80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">


<section id="home">HOME
<br><a class="nav-link" href="#myAnchor">go2end</a>    

    </section>
<div class="main">    
<section style="background-color:blue"></secion>
</div>
<a id="myAnchor" class="nav-link" href="#home">home</a>

正在滚动的是页面，因此为了最好地引用它，您在使用 jQuery 时需要以下代码:

$('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

@bru02 的修正非常精明，因此我使用该代码来演示平滑滚动效果。但是，我更改了代码，以便用户只需要将鼠标悬停在链接上而不是单击它——这样更便于保护手腕。并且，提供 HTML 以便用户也可以向上或向下滚动页面。

脚本本身显然源自 here也在那里工作。 OP 引用的脚本仅因复制/粘贴不完整而失败。