Angular 回到顶部 滚动到特定的页面位置
$timeout(function() {
// $location.hash('bottom');
// $anchorScroll();
// var a=angular.element("#loginPage")[0].scrollTop;
// var b=angular.element("#loginPage")[0].scrollHeight;
// angular.element("#loginPage")[0].scrollTop=b;
var height = $("#loginPage").outerHeight()-110;
var width = $("#loginPage").outerWidth()-260;
$('body, html').animate({
"scrollTop" : height,
"scrollLeft" : width
}, 500);
})
<!-- Top content -->
<div ng-controller="YacmpLoginController">
<div id="loginPage" class="top-content" style="position: static;background-image: url(libs/img/backgrounds/ClearingHouseBg.png);">
<div class="container" style="width: 100%;">
<div class="row">
<div class="col-sm-12 form-box">
<div class="form-bottom">
<form role="form" action="login" method='POST' autocomplete="off" name="loginForm" novalidate>
<div style="padding-left: 192px;">
<span class="error" ng-show="errorMessage != null">{{errorMessage|translate}}</span>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label">{{'User Id/Email'|translate}}:</label>
<!--<label class="sr-only" for="form-email">{{'User Id/Email'|translate}}</label>-->
<div class="col-sm-5">
<input type="text" name="username" ng-model="username" class="login-form-control" placeholder="{{ 'User Id/Email' | translate}}" id="form-email" required autocomplete="off"/>
<span class="error" ng-show="for.username.$error.required">
{{'Please input user id or email'|translate}}
</span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label">{{'Password'|translate}}:</label>
<div class="col-sm-5">
<input type="password" name="plainPwd" ng-model="password" class="login-form-control" placeholder="{{ 'Password' | translate}}" required autocomplete="off">
<input hidden name="password" value="{{passwordHash}}" />
<input hidden name="encrypted" value="{{isEncrypted}}" />
<input hidden name="loginType" value="{{loginType}}" />
</div>
<!--<div class="col-xs-6">-->
<!--<input type="checkbox" class="login-form-control"/>-->
<!--{{'Remember me'|translate}}-->
<!--</div>-->
<!--<div class="col-xs-1 pull-right">-->
<!--<a class="float-right" ng-href="#/register">{{'register'|translate}}</a>-->
<!--</div>-->
<div class="col-sm-2">
<a ng-click="forgetPassword()">{{'Forget Password'|translate}}</a>
</div>
</div> <div class="row">
<div>
<button type="submit" name="submit" value="Login" class="btn btn-primary btn-block btn-flat">{{'Sign in'|translate}}</button>
</div>
</div> <div class="form-group row">
<!--<select class="login-form-control" ng-model="selectedTenant" ng-options="t.name for t in all_tenants" required ng-disabled="all_tenants.length===1">-->
<!--</select>-->
<input hidden name="tenant" value="{{selectedTenant}}" />
</div>
</form>
</div>
</div>
</div>
</div> <a id="bottom"></a>
</div>
</div>
Angular 回到顶部 滚动到特定的页面位置的更多相关文章
- Angular回到顶部按钮指令
之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> < ...
- 小程序scroll-view实现回到顶部
一.wxml页面:catchtap阻止冒泡事件. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- 关于angular跳转路由之后不能自动回到顶部的解决方法
Question: angular2 scroll top on router change 当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置, ...
- 【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- jacascript 滚动 scroll 与回到顶部
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: ...
- jQuery实现页面回到顶部功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js刷新页面不回到顶部
今天遇到刷新页面不回到顶部的需求 window.location.reload();方法已经解决了问题,但是ie8不支持,后来采用的是锚点这个方法 window.location = '/plan/g ...
随机推荐
- notification 报错the method build() is undefined for the type Notificatin.Builder
notification 报错the method build() is undefined for the type Notificatin.Builder 这事api版本号太低导致的 Notifi ...
- SQL Server 数据库同步,订阅、发布、复制、跨服务器
随便说两句 折腾了一周,也算把数据库同步弄好了.首先局域网内搭建好,进行各种测试,弄的时候各种问题,弄好以后感觉还是挺简单的.本地测试好了,又在服务器进行测试,主要的难点就是跨网段同步,最后也解决了, ...
- 条件随机场(Conditional random field,CRF)
- 实现现下列哪一种接口的对象,并不需要在web.xml文件内进行额外的设定,Servlet容器就能够回应该对象加入HTTP会话所发生的事件?(选择1项)
实现现下列哪一种接口的对象,并不需要在web.xml文件内进行额外的设定,Servlet容器就能够回应该对象加入HTTP会话所发生的事件?(选择1项) A.ServletContextListener ...
- 选择LoadRunner Protocol的两大定律
选择LoadRunner Protocol的两大定律 确定性能测试脚本录制时使用的协议类型经常是一个容易引起误会的问题.很多刚刚接触到性能测试的同行常常会想当然地根据开发语言等来决定协议的选取,导致录 ...
- unity导弹算法 预计目标点
关于导弹的飞行算法,网上有很多教程.简单算法无非是获取目标点的当前位置,然后导弹朝目标方向移动.高深点的,就是通过计算获取碰撞点然后朝着目标移动.如果你能看懂这个高深算法的话,可以去看原帖:http: ...
- VC++ 创建自己的头文件包含GUID
Guidgen 是比较好用的工具之一,可以使用它来创建ActiveX控件的UUID,同时可以创建独特的剪贴板格式名称和唯一的标识符的内核对象, 如信号量.互斥和事件. 但我需要为另一个目的创建一个唯 ...
- Laravel5.1 关联模型之后操作
之前写过关于模型关联的笔记,但是模型关联好后的一些使用没有介绍,今天补上 1 写入关联模型 1.1 使用Save方法(一对多) 我们准备了两个模型:Post和Comment. 它们的关系是一对多关系. ...
- Github+Jekyll —— 创建个人免费博客(五)jekyllproject公布到github上
摘要: 本文中我将介绍一下怎样在github上搭建个人Blog(博客),也顺便让我们掌握一下github Pages功能,另外还涉及到Jekyll技术. ======================= ...
- webpack报错no postcss config...
终端里运行的错误: 查了好多资料,最后找到解决办法,改为: const webpack = require('webpack'); // const autoprefixer = require('a ...