AngularJs1和angular-ui-route.js,点击导航栏切换页面,滚动条每次都会置顶 10C

请教一个问题,我用的是AngularJs1和angular-ui-route.js,点击导航栏切换页面,页面虽然没有刷新,但滚动条怎么每次都会置顶啊,希望它能停留在之前浏览的位置
网上找了很久都没找到答案,急求

5个回答

你可以每次点击导航切换页面时,先获取下滚动条距离顶端的距离,然后给新页面设置滚动条位置即可。
这是jQuery获取滚动条距离的博客

qq_24435837
花生喂龙 回复qq_38494537: 这样子我页面有点多啊。。。
大约 2 年之前 回复
qq_38494537
chenjiexixi 回复花生喂龙: 也就是说,这个不能刷新页面,页面打开的时候,导航有多少选项,你就需要提前加载多少页面,而不是点击后加载页面
大约 2 年之前 回复
qq_24435837
花生喂龙 不是的,我是要 在A页面浏览到了底部,此时用路由切换到B页面,再从B页面切换到A页面,A页面还保持浏览到底部的状态,我现在是每次都回到了顶部
大约 2 年之前 回复

你看下切换到新的页面的时候旧的页面是销毁掉了还是隐藏掉了。。要是销毁掉了(用的ng-if),那么再切回去的时候重新渲染,肯定不会保留上次浏览位置的。用样式隐藏掉试试

还有,问题不要提在java分类下面。。

qq_24435837
花生喂龙 我都没有用啊,我把代码贴在下面了
大约 2 年之前 回复

或者你还是可以按照上面的方式提前计算好每个页面跳转前的滑动条距离,跳转回去的时候,再设置距离

我的代码:
routingMod.config(['$stateProvider', '$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider
.otherwise('c');
$stateProvider
.state('a',{
url:'/a',
templateUrl:'/studio/a/JOINT_CARE'
})
.state('c',{
url:'c',
templateUrl:'/studio/c/JOINT_CARE'
})
}])




首页







消息









qq_24435837
花生喂龙 回复qq_24435837: 上面的没显示出来。。。
大约 2 年之前 回复
qq_24435837
花生喂龙 <li> <div ui-sref="c"> <div class="admin_icon"></div> <p>我</p> </div> </li> <p>首页</p> </div> </li> <li> <div ui-sref="b"> <div class="msg_icon"></div> <p>消息</p> </div> </li> <li> <div ui-sref="c"> <div class="admin_icon"></div> <p>我</p> </div> </li>
大约 2 年之前 回复

图片说明
我要做的效果是 在 首页(a) 浏览到了底部,此时用路由切换到 我(c),再从 我(c) 切换到 首页(a),首页(a) 还保持浏览到底部的状态,我现在是每次都回到了顶部
我的代码:
图片说明
图片说明
图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
点击导航栏切换页面
这是一个运行在AS上的project,里面是点击导航栏切换页面的三种方式的moudle
点击导航栏切换不同的页面
实现效果 (因为无法上传视频,做成gif之后又很模糊,只能放在百度网盘里,又因为网盘维护中一定要提取码,而且我自己试了下,貌似看不了,也是很无奈,只能上gif了,也可以运行代码看效果) html代码( 注意哦: li的id和p的id是相互对应的) &lt;div class="navbar"&gt; &lt;ul&gt; &lt;li id="day...
随着滚动条下拉,导航栏置顶
随着滚动条下拉,导航栏置顶 想做一个这样的效果,当我们下拉滚动条时,写的导航栏置顶。 这是效果图 先学习用到的基本知识 jQuery CSS 操作 - scrollTop() 方法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。 jQuery C...
iframe页面滚动条置顶
页面滚动条置顶的几种方法:   一、使用animate方法       $("html,body",window.parent.document).animate({scrollTop:0},1000);//可置顶父窗口,但是不适应用于跨域;   二、使用scroll    window.parent.scrollTo(0, 0);   //可置顶父窗口,但是不适应用于跨域; 三、
页面每次刷新都会弹出窗口
点击页面一个button弹出窗口,button是服务器端控件,用的是Page.ClientScript.RegisterStartupScript的方法写的,每次刷新或者点浏览器的前进后退都会弹出这个窗口,怎么才能只在点击按钮时才弹出呀??
导航栏置顶
1、实现顶部和侧边导航吸顶,侧边导航在footer接触导航底部时被上顶。 2、效果图 3、代码段 顶部导航 顶部导航 顶部导航 顶部导航 顶部导航
页面滚动条置顶、置底
置顶操作$('html,body').animate({scrollTop: '0px'}, 10);置底操作$('html,body').animate({scrollTop: document.body.clientHeight+'px'}, 800);
jQuery导航栏,点击切换颜色
1.写好静态页面 &amp;lt;div class=&quot;navBox&quot;&amp;gt; &amp;lt;div class=&quot;comWidth&quot;&amp;gt; &amp;lt;ul class=&quot;nav&quot;&amp;gt; &amp;lt;li class=&quot;active&quot;&amp;gt;&amp;lt;a href=&quot;javascript:
点击导航栏切换iframe内容
&amp;lt;ul&amp;gt;             &amp;lt;li&amp;gt;&amp;lt;a src=&quot;path1&quot; target=&quot;my_iframe&quot;&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;             &amp;lt;li&amp;gt;&amp;lt;a src=&quot;path2&quot; target=&quot;my_iframe&quot;&amp;gt;&am
滚动条置顶
做项目时碰到的顺便分享下,滚动条置顶效果
当页面出现滚动条时,点击置顶的特效
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script type="text/javascript" src="jquery-3.0.0.min.js">script> head> body> style> #roll { z-index:999;
router切换, 滚动条不自动置顶
微信公众号从一个有滚动条的页面条状到连一个有滚动条的页面,此时滚动条会记录上一次滚动条的位置,不会自动置顶  图一                                                                                     图二    如图所示从图一进入到图二,滚动条自动滚动到底部。 解决方法 方法一: js原生有一个scro...
在UWP中页面滑动导航栏置顶
http://www.cnblogs.com/hei12138/p/fixedtohead.html
Android 每次点击桌面图标都会重新打开
项目中有启动页 WelcomeActivity,然后才是进入 MainActivity,而无论 App 进入到哪个界面,只要返回桌面,点击图标就会重新打开 App,而不是打开上次的界面。 解决方法,在 WelcomeActivity 的 setContentView 之前加入如下代码即可 if ((getIntent().getFlags...
多页面点击切换页面
第一次写这样的博客。真是不会写。效果什么的对很多人来说肯定觉得很简单,仅用来记录自己解惑过程,谢谢!拿到这套模板设计图,先整体构思了一下大致要使用到的动效、js,布局打算怎么布,js效果打算用哪种方式实现,最后开始创建页面。。。最开始打算使用swiper,layer,fullpage等来实现这个效果(感觉有点不方便),后来才发现自己想复杂了。浪费了一定时间html 代码部分:&amp;lt;!-- tp-...
按钮点击切换页面
public class FirstActivity extends AppCompatActivity { private ViewPager Home_Frag; private RadioGroup Home_Gp; private FragmentManager mFragmentManager; private List mFragmentList = new ArrayList&amp;lt;...
导航栏tab每次点击只展示下一个
之前项目赶进度,所以去网上找了HorizontalNavigationBar这个demo,有需要的可以自行百度。 但是产品经理要求每次点击边上的tab只展示下一个tab,想想还是有道理(毕竟产品是我大哥),所以就自行改了一下内部计算的方法,然后写个博客,算是自己做个笔记好了。 核心方法就是下面的
导航栏切换
导航栏切换
android 可滑动、点击切换的导航栏
目前很多应用都是支持滑动切换的,其中实现原理是,顶部是一个RadioGroup + 下面的线条 (我用的是填充)Imageview。 写这个Demo的整个思维是这样的,相当于是图层,最底层是一个Fragment,接着分为顶部 FirstRadioGroup 和 下半部分 ViewPager;然后我这里ViewPager里也是一层Fragment,即下面代码里命名的ContentFragment。
点击导航栏,切换div内容(js+css+html)
**成果展示** 代码展示:* &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/tit
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置 js部分 //标题对象 var title = document.getElementById("title"); //菜单对象 var menu = document.getElementById("menu"); //正文对象 var content =...
ViewPager-IconPageIndicator导航栏效果(增加点击切换)
ViewPagerIndicator地址:https://github.com/JakeWharton/ViewPagerIndicator 最近在使用PageIndicator的时候,用到IconPageIndicator,看效果图,感觉可以把icon那里做成导航栏啊,就可以代替平常使用的RadioGroup,感觉编码会简洁很多。 先把IconPageIndicator运行起来看看,效果还可以
为什么每次都会重编
为什么我的项目 每次都会重编依赖项的代码。rn并没对依赖的代码作修改。rnrn编译器中哪里可以设置呢,VS9.0。
请教一下导航栏切换页面后的定位问题
[code=JScript]rn// JavaScript Documentrn$(function()rn rn);rn//获取COOKIErn function getcookie(link)rn if(document.cookie.length > 0)rn var start=document.cookie.indexOf(link + "=");rn if(start!=-1)rn start=start+link.length+1;rn var end=document.cookie.indexOf(";",start);rn if(end==-1)rn end=document.cookie.length;rn rn return unescape(document.cookie.substring(start,end));rn rn rnrnrn//设置COOKIErnfunction setcookie(name,value,Days)rn var exp=new Date();rn exp.setTime(exp.getTime()+Days*24*60*60*1000);rn document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString();rn rn rn//根据COOKIE设置导航栏当前页面的效果rnfunction fn(id)rn var idmenu=getcookie('link');rn if(idmenu!=null && idmenu!='')rn setcookie('link',"",new Date(0)); //把以前的去掉rn setcookie('link',id,1); //设置新的rn $("#"+idmenu).addClass('old').siblings("a").removeClass("old");rn //$("#pp").text(idmenu);rn elsern setcookie('link',id,5);rn $("#"+id).addClass('old').siblings("a").removeClass("old");rn rn rnrn[/code]rnrn意思很简单,就是网上常见的那种效果,比如我页面导航上有三个链接: rnrn 网站首页 | 公司简介 | 联系我们rnrn 默认情况下class为.old的属性是加在网站首页上的,当点击公司简介或者联系我们后,就把.old的CLASS移到点击后页面的链接上,移除其他两个的.old。。rnrn 思路不是很清晰了,我用JQUERY的。。还望哪位能够给点清晰的思路或者举个小例子。谢谢。rnrnrn 能给找个这样导航的网站也行,以前到处可见,今天想见还搜不到了。。rn 谢谢。。
js滚动条置顶
1、Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。 el.on('focus', '#suggestionContent', function () { var target =...
ViewPager+Fragment侧滑及点击切换页面
ViewPager+Fragment侧滑及点击切换页面,不冲突。Android经典例子,解决侧滑切换和点击切换冲突问题。
点击按钮切换页面viewpager
&amp;lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;match_parent&quot; android:orientation=&quot;vertical&quot;&amp;gt; ...
整体框架——点击切换页面
剔除繁杂的理论,注重实践,深入浅出使用自定义控件的知识实现一个壁纸类的app
页面Tab切点击切换
一直对于JS、jquery比较生疏,苦于在前端路上一直是孤军奋斗,没人学习交流,全靠自己琢磨。上家公司时抽了一些空余时间对于js、jquery的基本知识进行了一些系统的自学,并没有实际去写一些相关的项目,但自我感觉已经掌握了不少了,在这种自我感觉良好的情况下跳槽到了现在的公司:有货,主要工作内容就是活动pc及app页面的是制作,添加链接,基础到不行的工作。上次的活动需要写个Tab切,心想还是有点自学
viewpager 点击小圆点切换页面
这是一个Viewpager的一个Demo,实现了点击校园点切换页面的效果
js轮播页面,点击切换
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
fragment点击切换页面(变色)
例:在res下面新建drawable文件夹》新建radio_select.xml文件》&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&amp;gt; &amp;lt;item android:state_checked=&quot;.
页面置顶
我自定义了页头和页脚,我想点击一下页脚当中的一张图片,当前页面能一下子到达页面最上端,但把事件写在页脚的话rn[code=C#]rnprotected void ImageButton1_Click(object sender, ImageClickEventArgs e)rnrn this.Page.SetFocus(siteHeader);rnrn[/code]rnthis.Page.SetFocus(siteHeader);会找不到siteHeaderrn页头和页脚拖到很多页面,每个都写相同的事件太麻烦了rn【siteHeader是页头的id】rn怎么弄啊前辈们~
滚动条置顶问题
小菜鸟写了个滚动条窗口,用QScrollView下写的,里面包含竖着的7个小的图形显示窗口。rn滚动条位置问题,请问QT3 里面有设置滚动条起始位置的代码么
为什么每次刷新.... 滚动条都会恢复到上面 有没有什么办法
为什么刷新后,页面的滚动条都会到最上面,下面选定的内容看不到, 又要把滚动条啦到下面去rn 每次刷新 每次都要重新拉 很麻烦 有什么办法没有
点击导航栏,页面不跳转,刷新内容
点击导航栏,页面不跳转,刷新内容,类似AJAX
angularJS1界面跳转
1.利用a标签跳转 <div id="first-id" ng-init="second_html='second.html?mark=index'"> <a ng-href="{{second_html}}" ></a> </div> 2.在函数内写跳转逻辑 <html > <head> <script src="http://cdn.static.runoob
页面导航栏
Ext.onReady(function() { var i = 0; var tabCenter = new Ext.TabPanel( { region : 'center', margins : '0 0 0 0', id : 'tab_view', activeTab : 0, //tabWidth : 135, resizeTabs: tru...
关于vue-router切换滚动条自动置顶的一点记录
    现在在写一个单页面的项目,但是遇到了一个问题,就是每次切换回主页滚动条自动置顶,由于是首页-&amp;gt;详情页,这样的页面切换方式,每次切换回来就自动置顶带来的体验非常不好,需要解决这个问题    查了一些资料,有vue-router官方自己的滚动方法,还有一个就是keep-alive缓存。    首先是官方的方法,     scrollBehavior (to, from, savedPos...
每次用ExecuteNonQuery都会错!!
每次用ExecuteNonQuery都会错!!rn我想在特定的地方修改数据,代码如下:rnstring strUpdt = " UPDATE studentmessage SET unit = '"+ unit.Text + "' ,unitid = '" + unitid.Text + "' , studentno ='0 ' , birthyear = '" + birthyear.Text + "',studentsort='" + studentsort.Text + "',studentsource='" + studentsourcesort + "'WHERE studentno = " + 0;rnSqlCommand myCommand2 = new SqlCommand ( strUpdt , sqlConnection1 ) ;rnmyCommand2.ExecuteNonQuery ( ) ;!!!!!!!这里错!!!!!rnsqlConnection1.Close ( ) ;rn我还用对过以上方式的数据添加,修改!rn不知道利用数据集的修改记录该怎么写。rnDataRow anyRow =dataSet61.studentmessage.Rows[0];rnanyRow["unit"]= unit.Text;rnanyRow["unitid"]= unitid.Text;rnanyRow["报考号"]= 0;rnanyRow["birthyear"]= birthyear.Text;rnanyRow["studentsort"]= studentsort.Text ;rnanyRow["studentsourcesort"]= studentsourcesort.Text ;rndataSet61.studentmessage.Rows.Add(anyRow);!!!!这里错!!!!rnsqlDataAdapter1.Update(dataSet61);!!!!!这里错!!!!rn我这么写程序提示:数据库有一条记录,怎样修改以上的程序呢?rn望指教。
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法