建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery锚点跳转动画插件anchor.js

来源:易助科技网浏览量:7收藏

简介


anchor.js 是一款简单且有非常实用的 jQuery 插件,为所有本地链接提供一个平滑的动画,然后跳转到页面的任意一个元素。


JQuery锚点跳转动画插件anchor.js-示例图




使用


1.  引入文件


<script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>


2.  基本用法


/**
 * Example 1
 * Add anchors to all h1's on the page
 */
anchors.add('h1');

/**
 * Example 2
 * Adds anchors to elements that have been assigned the class '.anchored'
 */
anchors.add('.anchored');

/**
 * Example 3
 * If no selector is provided, it falls back to a default selector of:
 * 'h2, h3, h4, h5, h6'
 */
anchors.add();


如果希望浏览器正确跳转到ID,则需要在页面加载过程的早期向页面添加锚点。


3.  配置


OptionAccepted ValuesDefault ValueDescription
placementright
left
rightright appends the anchor to the end of the element.
left places it to the left, in the margin.
visiblehover
always
hoverhover displays the anchor when hovering over the element.
always will always display the anchor link.
icon(any unicode character)Replace the default link icon with the character(s) provided. These are a few good options: #, , , and §.
class(any string)(none)Adds the provided class(es) to the anchor html.
base(any string)(none)Prepends the base URI to the anchor href. This is useful when adding anchors to pages with changing content.
truncate(any positive number)64Truncates the generated ID to the specified character length.
ariaLabel(any text)AnchorAllows you to customize or translate the default aria-label ("Anchor"), for screenreaders that encounter the link.
titleText(any text)(none)Adds the text as title text to all anchors.



相关链接


官方地址 :https://www.bryanbraun.com/anchorjs/

github 地址 :https://github.com/bryanbraun/anchorjs