锚链接以及返回顶部/左/右简单实现方法

185 阅读1分钟

首发:鲸讯微信小程序
作者:鲸林向海工作室

为了方便访客更好的浏览官网,工作室增加了官网的“快捷返回功能”。

1、锚链接:

首先想到的最简单的就是“锚链接”,因为官网是左右浏览的,所以使用锚链接也可以“从右向左”或者“从左向右”,非常简单方便。

如何使用呢,下面给大家举个例子: 使用< a >元素实现页面内部的跳转,我们称之为锚链接。 示例代码

<a id="top">这是顶部</a>
<a href="#top">回到顶部</a>

注意,中间要添加一些元素撑开页面形成浏览器滚动条之后才能够展示出效果。 其中href属性的地址必须指向当前页面中指定的< a >元素,格式为# + name属性值。

2、jQuery方法

使用“锚链接”有个问题就是返回的时候太过“生硬”,不柔和,没有动画效果。故而小泊又用了另一种方式。 html代码

<i class="fa fa-arrow-left" @click="goLeft" style="margin-right: 5px"></i>

js代码

 goLeft(){
      $('html,body').animate({scrollLeft: '0px'}, 1000);
    },

这里要注意的是,需要引入jQuery文件。

上面是返回左边,同理,返回顶部:

 goLeft(){
      $('html,body').animate({scrollTop: '0px'}, 1000);
    },

3、鲸讯社区