Smooth scrolling between in-page links

对于长网页,我有一个“返回页首”功能,当单击时,顺畅滚动页面返回顶部。

按钮看起来像这样,在页面的右下角:

enter image description here

代码:

$(document).ready(function() {
  // browser window scroll position (in pixels) where the button will appear
  var offset = 200,

    // duration of the animation (in ms)
    scroll_top_duration = 700,

    // bind with the button
    $back_to_top = $('.back-to-top');

  // display and hide the button
  $(window).scroll(function() {
    ($(this).scrollTop() > offset) ? $back_to_top.addClass('make-visible-btt'): $back_to_top.removeClass('make-visible-btt');
  });

  //smooth scroll to top
  $back_to_top.on('click', function(event) {
    event.preventDefault();
    $('body,html').animate({
      scrollTop: 0,
    }, scroll_top_duration);
  });
});
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: inline-block;
  height: 40px;
  width: 40px;
  background: url(../images/back-to-top.png) no-repeat;
  background-size: contain;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  border: 1px solid #aaa;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
}

.make-visible-btt {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s 0s, visibility 0s 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="/my-web-page/" class="back-to-top">Back to Top</a>

罚款罚款。当用户向下滚动时,出现箭头,并且在单击时,平滑向其滚动回顶部。没问题。

问题是页面链接.当用户点击这样的链接时:

<a href="/my-web-page/#section-3">text text text</a>

…页面刚刚以默认方式跳转到该部分。

到目前为止,我必须为简单的滚动工作进行简单的链接。

$(document).ready(function(){
  $('a[href*="\\#"]').on('click', function(event){
    var href = $(event.target).closest('a').attr('href'), 
        skip = false;
    for (i = 0; i < exceptions.length; i++) {
      if (href.indexOf(exceptions[i]) > -1) {
        skip = true;
      }
    }
    if (!skip) {
      event.preventDefault();
      $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    }
  });
});

它不起作用。

将欣赏任何建议。

Also,如果我们可以将载体函数与主脚本组合,那将是很棒的。

谢谢你。

我删除了for其中包含的exceptions引用,它的工作正常。光谱

回答 1

  1. 赞同 2

    申请申请scroll-behavior: smooth对于文档消除了对任何JavaScript的需求,因为它使所有锚点链接顺利滚动。

    Per mdn.:

    滚动框以平滑的方式滚动,使用用户 - 代理定义的时间函数在用户 - 代理定义的时间段内。如果有的话,用户代理应该遵循平台约定。


    要使“回到顶端”锚滚动到顶部,只需设置hrefTO.#.

    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: inline-block;
      height: 40px;
      width: 40px;
      background: url(../images/back-to-top.png) no-repeat;
      background-size: contain;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      border: 1px solid #aaa;
      visibility: hidden;
      opacity: 0;
      transition: opacity .3s 0s, visibility 0s .3s;
    }
    
    .make-visible-btt {
      visibility: visible;
      opacity: 1;
      transition: opacity 1s 0s, visibility 0s 0s;
    }
    
    .section {
      border: 1px solid black;
      background-color: #ededed;
      height: 200px;
    }
    
    html {
      scroll-behavior: smooth;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <a href="#last">jump to last section</a>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section" id="last"></div>
    <a href="#" class="back-to-top make-visible-btt">Back to Top</a>


    使原始jQuery代码工作,只需删除问题exceptions引用:

    $(document).ready(function() {
      // browser window scroll position (in pixels) where the button will appear
      var offset = 200,
    
        // duration of the animation (in ms)
        scroll_top_duration = 700,
    
        // bind with the button
        $back_to_top = $('.back-to-top');
    
      // display and hide the button
      $(window).scroll(function() {
        ($(this).scrollTop() > offset) ? $back_to_top.addClass('make-visible-btt'): $back_to_top.removeClass('make-visible-btt');
      });
    
      //smooth scroll to top
      $back_to_top.on('click', function(event) {
        event.preventDefault();
        $('body,html').animate({
          scrollTop: 0,
        }, scroll_top_duration);
      });
    });
    $(document).ready(function() {
      $('a[href*="\\#"]').on('click', function(event) {
        var href = $(event.target).closest('a').attr('href'),
          skip = false;
        if (!skip) {
          event.preventDefault();
          $('html,body').animate({
            scrollTop: $(this.hash).offset().top
          }, 500);
        }
      });
    });
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: inline-block;
      height: 40px;
      width: 40px;
      background: url(../images/back-to-top.png) no-repeat;
      background-size: contain;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      border: 1px solid #aaa;
      visibility: hidden;
      opacity: 0;
      transition: opacity .3s 0s, visibility 0s .3s;
    }
    
    .make-visible-btt {
      visibility: visible;
      opacity: 1;
      transition: opacity 1s 0s, visibility 0s 0s;
    }
    
    .section {
      border: 1px solid black;
      background-color: #ededed;
      height: 200px;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <a href="#last">jump to last section</a>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section" id="last"></div>
    <a href="/my-web-page/" class="back-to-top">Back to Top</a>

    光谱