drupal8添加返回顶部图标教程

drupal8教程 提交于 2018-09-18 00:54:12

返回顶部图标相信大家都不陌生,一般在页面向下滚动时出现在页面的右下角或右侧区域,鼠标点击一下即可瞬间返回页面顶部,免去了鼠标多次滚轮或拖动滚动条才能返回页面顶部的操作。

关于“返回顶部”功能先看两个示例:

Drupal8页面添加返回顶部图标教程

新浪网的返回顶部图标在页面右下角位置。

Drupal8添加返回顶部功能Back To Top模块使用教程

淘宝网的返回顶部功能在页面右侧中间位置。

返回顶部虽然只是一个很小的功能却能给用户良好的体验,实现的方法很多,下面介绍drupal8用Back to Top模块添加返回顶部功能的方法。

Back To Top模块在屏幕右下角添加一个悬停的返回顶部的按钮,允许用户使用jQuery平滑地将页面向上滚动至顶部。

下载地址:https://www.drupal.org/project/back_to_top 

安装drupal8版本的Back to Top模块,进入drupal8后台“配置”中的“Back to Top”。

Drupal8添加返回顶部图标教程

Drupal8 back to top模块使用教程

drupal8模块back to top使用方法教程

Back to Top模块提供了丰富的设置,包括:

  • 在移动和触控设备中禁用返回顶部功能。
  • 在管理后台页面和文章编辑页面禁用。
  • 在网站首页禁用。
  • 使用图标或文字形式的返回顶部按钮。
  • 设置返回顶部图标的位置。
  • 设置文字形式按钮的样式。

Back to Top模块的设置比较直观就不一一介绍,返回顶部图标出现的位置、样式可根据自己的页面主题设置,默认设置启用后的效果:

drupal8 back to top模块使用教程

如不满意默认图标的样式,可设计一张名为backtotop.png的图标替换Back to Top模块根目录下原文件即可。

此外还可以通过主题的ID backtotop来自定义文字或图标。

<div id="#backtotop">Back To Top</div>

标签

如果文章对你有帮助,请赞赏支持本站发展!

发表评论

此字段内容将保密,不会被其他人看见。

纯文本

  • 不允许使用HTML标签。
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。