因为最近在开发angular,自己有路由 用window.location跳到默认路由,查了半天用angular方式不好解决 ,so 原生走起

START

scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况。

EXPLAIN

调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;

参数为false时,使element的底部与视图(容器)底部对齐。

TIPS:页面(容器)可滚动时才有用!

EXAMPLE

document.getElementById("view").scrollIntoView();
  • 1

document.getElementById("view").scrollIntoView(false);
  • 1

END

scrollIntoView可以说是URL中hash标记的进化,那么它在什么时候用到呢?想想hash(也就是#xxx)的作用吧!

下图展示的是我对scrollIntoView的一种应用

锚点 , angular 锚点 vue锚点的更多相关文章

  1. vue 锚点定位

    vue 锚点定位 <template> <div class="details"> <div class="wrapper w"& ...

  2. Jerry的碎碎念:SAPUI5, Angular, React和Vue

    去年我去一个国内客户现场时,曾经和他们IT部门的一位架构师聊到关于在SAP平台上进行UI应用的二次开发时,UI框架是选用UI5还是Vue这个话题. 我们代表SAP, 向客户推荐使用UI5是基于以下六点 ...

  3. 我从Angular 2转向Vue.js, 也没有选择React

    译者按: 通过使用Angular的经历,作者已经完全转为Vue粉了!我们Fundebug目前还是用AngularJS 1,坦白说,学习曲线蛮陡的. 原文: Why we moved from Angu ...

  4. 【转】前端框架天下三分:Angular React 和 Vue的比较

    前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...

  5. 【repost】前端学习总结(二十三)——前端框架天下三分:Angular React 和 Vue的比较

    目录(?)[+]   前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Ang ...

  6. angular.js和vue.js中实现函数去抖(debounce)

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

  7. 前端框架:Angular React 和 Vue的比较

    前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React, ...

  8. vue锚点

    第一种: router.js中添加 mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return { sele ...

  9. Angular React 和 Vue的比较

    Angular(1&2),React,Vue对比 一 数据流 数据绑定 Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面. 实现原理: $scope变量中 ...

随机推荐

  1. 【四】php 函数

    一:函数 作用:为了分割那些能够独立完成有明确任务的代码,更易于阅读 调用函数:function_name(args1,args2...); args可以是任何一种php变量,包括数组或对象 函数名不 ...

  2. JDK10 新特性

    关于至此,我从大一下学习,以及大二上的巩固,这应该是SE部分的最后一章节内容,介绍一下jdk10的新特性 jdk在更新10之后,出现很多新特性,根据我所观看的视频,主要提及以下几点新特性 1.新增va ...

  3. Java SE LinkedList的底层实现

    关于实现链表的底层原理 链表便于增删,不便于查询 package com.littlepage.linkedList; /** * 基于底层实现LinkedList * @author Littlep ...

  4. django会话session

    因为因特网HTTP协议的特性,每一次来自于用户浏览器的请求(request)都是无状态的.独立的.通俗地说,就是无法保存用户状态,后台服务器根本就不知道当前请求和以前及以后请求是否来自同一用户.对于静 ...

  5. NativeWindow_01_CreateWindow(Ex)_VC6

    1. #include <windows.h> LRESULT CALLBACK ProcWindow(HWND hwnd, UINT uMsg, WPARAM wParam, LPARA ...

  6. ubuntu 中文设置

    1,安装中文语言包 sudo apt-get install language-pack-zh-hans sudo update-locale LANG=zh_CN.UTF-8 添加中文支持: sud ...

  7. html+css+js实现类似音乐app似的列表播放

    最近做了一个类似于音乐app里面列表播放的功能,主要是音频播放和按钮状态的联动: 界面如下: 如上图所示 上面有一个播放按钮 下面有一个播放列表 上面还有一个歌曲长度的总时长 上面一个按钮能控制下面所 ...

  8. Asp.net core 学习笔记 ( Area and Feature folder structure 文件结构 )

    2017-09-22 refer : https://msdn.microsoft.com/en-us/magazine/mt763233.aspx?f=255&MSPPError=-2147 ...

  9. 图片路径转base64字节码

    package product; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOE ...

  10. socket 发送图片

    using System;using System.Collections.Generic;using System.Text;using System.Net.Sockets;using Syste ...