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

运行机制

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

如何获取

使用现有解决方案

1. 在发布商帐户中打开您的项目。
2. 在侧边栏中单击建站器。
3. 单击打开建站器。
4. 为滚动开始的区块添加按钮组件。更改您的按钮文本。
5. 将组件类型设置为链接并将链接插入到该字段。
6. 将以下代码插入到自定义代码区块中：

<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>

7. 修改以下参数：
   • 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。

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

观看本说明的视频教程：

添加自有代码

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

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

有用链接