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

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


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

锚链接:

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

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

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

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);
    },

联系小泊

email:643209899@qq.com

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,950评论 1 45
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 829评论 0 3
  • 高考日是个特殊的日子,成了全民关注焦点。 这几天朋友圈和网上都在流传有关高考的段子,原来又到了高考时节。 1977...
    永远是我阅读 913评论 6 8
  • 最近做的梦感觉太真实,又荒谬。前天梦到怀孕了,各种操心,胎教,磕磕碰碰,上学之类。昨天梦到自己学医面对考验要去鬼屋...
    何用孤高比云月阅读 154评论 0 0
  • 君子不立危墙之下 人和人是有区别的,但是,人性和人性却没有太大的区别。皮囊之下,浅探之下...
    天行健君马甲阅读 278评论 0 3