html返回顶部开始隐藏,回到顶部并且监听顶部按钮显示或隐藏

html：

js:

/**

* 点击top按钮回到顶部

$('#top,#top2').on('click',function () {

$("html, body").animate({scrollTop: 0 }, {duration: 500,easing: "swing"});

return false;

});

/**

* 监听页面

* */

$(window).bind('scroll',function(){

if(window.innerWidth >= 768){

var len=$(this).scrollTop();

if(len>=100){

//显示回到顶部按钮

$('#top').fadeIn('1000');

}else{

//影藏回到顶部按钮

$('#top').fadeOut('1000');

}

}else {

var len=$(this).scrollTop();

if(len>=100){

//显示回到顶部按钮

$('#top2').fadeIn('1000');

}else{

//影藏回到顶部按钮

$('#top2').fadeOut('1000');

}

});

html返回顶部开始隐藏,回到顶部并且监听顶部按钮显示或隐藏相关推荐

js IntersectionObserver监听元素的显示与隐藏，图片懒加载
IntersectionObserver监听显隐,监听元素在可视窗口中展示的比例,1:完全展示出来了,0:完全遮挡了,opacity和visibility控制的显隐是不会触发的.该api常用于图片懒加 ...
jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
hidden隐藏域值变化监听
hidden隐藏域值变化监听 jQuery.fn.val方法来赋值不会触发change事件,但是可以手动触发. 如:$('#id').val(111).change();
点击按钮显示或隐藏Div块
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换. 代码如下: 方法一: <!DOCTYPE html> <html> <head><script s ...
uniapp APP开发监听顶部返回按钮到指定页面
目录 1.使用原生顶部导航栏 2.使用自定义顶部导航栏 1.使用原生顶部导航栏 onBackPress 监听页面返回,返回 event = {from:backbutton. navigateBack ...
vue动态获取元素距离页面顶部的高度_VUE如何实时监听元素距离顶部高度
VUE如何实时监听元素距离顶部高度发布时间:2020-07-30 09:09:43 来源:亿速云阅读:150 作者:小猪这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有 ...
Android炫酷的Toolbar+Bottom+Fab悬浮按钮显示、隐藏、渐变的各种实现姿势
前言由于手机屏幕大小的限制,各种控件需要根据需求进行显示,隐藏,移动等,以增加视觉效果,用户体验.就拿目前市场上常见的APP如知乎.QQ.淘宝.美团等来说,在他们的APP里面随处可见一些比较优美的处 ...
html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法
JS控制HTML元素的显示和隐藏的两种方法利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一 ...
android 监听物理返回键,Android应用开发之react-native 监听Android物理返回键
本文将带你了解Android应用开发之react-native 监听Android物理返回键,希望本文对大家学Android有所帮助. 1. componentWillMount(){ ...
html 点击隐藏特效代码,vueJS简单的点击显示与隐藏的效果(实现代码)
下面小编就为大家带来一篇vueJS简单的点击显示与隐藏的效果[实现代码].小编觉得挺不错的,现在分享给大家,一起跟随小编过来看看吧目前前端框架太多,接触过angular.ember,现在开始倒腾vu ...

html返回顶部开始隐藏,回到顶部并且监听顶部按钮显示或隐藏

html返回顶部开始隐藏,回到顶部并且监听顶部按钮显示或隐藏相关推荐

最新文章

热门文章