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

作者博客：漂小泊的博客
作者主站：小泊随記
原文地址：文章地址

---

为了方便访客更好的浏览官网，小泊便增加了官网的“快捷返回功能”。

锚链接：

小泊首先想到的最简单的就是“锚链接”，因为官网是左右浏览的，所以使用锚链接也可以“从右向左”或者“从左向右”，非常简单方便。
锚链接
如何使用呢，下面给大家举个例子：
使用< a >元素实现页面内部的跳转，我们称之为“锚链接”。 示例代码

这是顶部
回到顶部

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

jQuery方法

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

js代码

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

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

上面是返回左边，同理，返回顶部：

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

联系小泊

email：[email protected]