现今的 chrome 浏览器,为了实现丝滑顺畅地滑动,活动时间直接执行而不再检测默认事件,这使得无法用 e.preventDafult() 来阻止默认事件。
现在需要添加 {passive: false} 配置
$(document).addEventListener( 'scroll', fun, {passive: false} ) 把事件被动监听设置为 false 之后,就可以正常阻止默认事件了。
为了手动地使页面平滑滚动到某个高度,需要使用 $.animate({scrollTop: val}) 。由于不同浏览器间的差异,绑定 scrollTop 的 DOM 元素是不一样的,比如
为了解决这个差异,我们需要把 animate 同时绑定在两个节点上。 $('html, body').animate()
$().position() ———— 基于父元素,从自身的外边框为点。
$().offset() ———— 基于父元素,从自身内容为点。
$(window).height().width() ———— 获取窗口宽高。
因为使用的是监听 touchstar 和 touchend 方法,所以该方法只适用于移动端。
主要的思路就是监听“触摸开始”和“触摸结束”两个事件,分别获取事件当前的触摸点坐标和文档滚动的值,进行对比判断“触摸是否有滑动”以及“文档是否有滚动(到底)”,来执行需要的方法。下面说说几个注意点:
1.首先,在html中,小编我用到了两个div元素,并且它们都用到了ID哦。
2.然后我们设置content的高度非常高,这样就会产生滚动条啦。
3.然后设置gotop,让它固定不变的在右下角,哈哈,返回顶部一般都是在右下角的。
4.如你所看到的,滚动条有了,返回顶部的按钮也有了,接着就是设置特效了哦。
5.滑动特效要用到jQuery插件哦,所以要把它链接到html里头。
6.然后我们再给gotop设定一个点击事件,设定方法如下。
7.接着我们设置body的scrollTop值为0就行了哦,然后再设置一下animate的时间即可完成,非常简单。
HTML网页返回顶部的做法:
1、使用默认链接锚记:只需添加一个超链接,给超链接的href属性设置值为“#top”即可实现返回顶部的功能,无需添加其他内容。
2、href指向特定id:这种方法是在页面现有的标签中,使用“返回顶部”的连接的href指向顶部具有id属性的标签,以实现返回顶部的功能。这种方法,需要在页面顶部的标签中有具有id属性的标签,来实现指向顶部。亦可自定义添加。
3、使用自定义链接锚记:这种方法,就是使用的自定义链接锚记了,必须要定义锚记,然后使用超链接指向锚。这种方法其实跟第二种方法差不多,只不过必须要额外定义一个链接锚记。
4、使用简单脚本:这种可以设置scrollTo(0,0)中的x、y的值来跳转到页面的具体位置。
5、点击返回按钮,页面想火箭一样逐渐上升,直至返回顶部。本方法能使页面动态滚动,如果把按钮做成一个火箭标志,在点击之后页面滚动时,按钮背景切换为火箭上升标志。
//你犯了一个超低级的错误,停止动画的时候出错了if(top > 2 && top <nowHeight){
//设置滚动条高度为第一屏高度
ht.animate({"scrollTop":nowHeight},1000,function(){
ht.stop(true,true)
//修改这里就行了
})
}
参考这里:http://www.w3school.com.cn/jquery/jquery_stop.asp
使用jquery必须注意:jquery的事件、方法等等,都是建立在jquery对象的基础上的,也就是你调用任何的jquery事件或方法都必须$()以后才能使用。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)