在页内链接之间平滑滚动

如何解决在页内链接之间平滑滚动

对于长网页,我有一个“返回顶部”功能,当点击时,页面平滑地滚动回到顶部。

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

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

它不起作用。

如有任何建议,我们将不胜感激。

另外,如果我们可以将页内功能与主脚本结合起来,那就太好了。

谢谢。

解决方法

只需将 driver.find_element_by_css_selector("div.v-button.v-button-primary.primary").click() 应用到文档就不需要任何 JavaScript,因为它可以使所有锚链接平滑滚动。

每个MDN

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


要使“返回顶部”锚点滚动到顶部,只需将 scroll-behavior: smooth 设置为 href

#
.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;
}


要使原始 jQuery 代码正常工作,只需删除有问题的 <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> 引用:

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 0s;
}

.section {
  border: 1px solid black;
  background-color: #ededed;
  height: 200px;
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?