javascript - 一段时间后转到带有 anchor 的内容

标签 javascript jquery html css anchor

我的网站上有一个“介绍图片”,用户可以点击该图片,然后使用 anchor 将页面向下滚动到内容。嗯,不是每个人都点击链接,所以我希望页面在几秒钟后自动向下滚动到内容(如果用户没有点击 anchor 链接)。有什么方法可以使用 JS 或 CSS 来帮助我做到这一点吗?

这是链接 http://www.bahelitours.com/es/info-test

最佳答案

目标区域是#info-content。使用 setTimeout() 在一段时间后运行(运行时间为 5000 毫秒,或 5 秒 - 根据需要更改),并查看用户是否没有滚动($.scrollTop( ) == 0),如果没有,滚动到目标区域。

setTimeout(function() {
  if ($(window).scrollTop() == 0) {
    $('html, body').animate({
  scrollTop: $('#info-content').offset().top
    },500,"swing");
  }
},5000);
header,#info-content {
  height: 300vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<section id="info-content">info-content</section>

关于javascript - 一段时间后转到带有 anchor 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42560836/

相关文章:

javascript - 下拉菜单的默认值也适用于正则表达式

html - 最后一个 child 没有按预期使用 p 标签工作

javascript - 串联执行原生js promise

javascript - IE8 的 IE11 模拟器的 Google 图表错误

javascript - 如何关闭 fancybox 并重置输入表单值

html - WordPress响应式菜单不隐藏链接

javascript - 动态附加项目时,masonry 不会将它们布局出来

IE 中的 JavaScript 字符串拆分和比较

javascript - 如何根据 .csv 报告中的数值以及动态创建表格时更改表格单元格颜色?

javascript - 为什么 uibmodals 只能在第二次调用时拖动?