如何支持用户将页面滚动至指定区块

运行机制

如果您想要将用户的注意力吸引到网站的特定区块,可以通过自定义HTML代码设置页面自动滚动到该区块。您可以使用现有解决方案添加自有代码

如何获取

使用现有解决方案

  1. 前往发布商帐户 > 建站器
  2. 为滚动开始的区块添加按钮组件。更改您的按钮文本。
  3. 将组件类型设置为链接并将链接插入到该字段。
  4. 将以下代码插入到自定义代码区块中:

Copy
Full screen
Small screen
<script>
(function() {
var scrollBlock = '.block--header';
var scrollBlockNumber = 0;
var scrollButtonNumber = 0;

var scrollToBlockName = '.block--packs';
var scrollToBlockNumber = 0;

var button = document.querySelectorAll(scrollBlock)[scrollBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[scrollButtonNumber];
button.href = 'javascript:void(0)';
button.addEventListener('click', function () {
  var scrollTo = document.querySelectorAll(scrollToBlockName)[scrollToBlockNumber];
  scrollTo.scrollIntoView({ behavior: 'smooth' });
});
})();
</script>

  1. 修改以下参数:
    • scrollBlock - 包含滚动按钮的区块的CSS类名称。可以是:
      • .block--header(标题区块)
      • .block--hero(行动召唤区块)
      • .block--packs(套餐区块)
    • scrollBlockNumber - 包含滚动按钮的区块的序号。最小值是0
    • scrollButtonNumber - 滚动按钮的序号。最小值是0
    • scrollToBlockName - 将页面滚动到的目标区块的CSS类名称。可以是:
      • .block--header(标题区块)
      • .block--hero(行动召唤区块)
      • .block--html(自定义代码区块)
      • .block--packs(套餐区块)
      • .block--description(描述区块)
      • .block--gallery(图库区块)
      • .block--requirements(系统要求区块)
      • .block--faq(常见问答区块)
      • .block--embed(社交媒体小组件区块)
      • .block--news(新闻区块)
      • .block--footer(页脚区块)
    • scrollToBlockNumber - 将页面滚动到的目标区块的序号。最小值是0

  1. 单击预览以查看您的更改。

观看本说明的视频教程:


添加自有代码

  1. 在建站器中,单击添加区块,然后选择自定义代码

  1. 在区块中插入自己的代码。

本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。
为此页面评分
为此页面评分
我们还有其他可改进之处吗?

不想回答

感谢您的反馈!

有用链接

上次更新时间: 2021年7月20日

发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!