scrolltop | 易学教程

返回页面顶部

阅读更多关于返回页面顶部

js效果 <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>jquery 常规选择器</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> *{margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';} .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block;} * html .clearfix{height:1%} .clearfix{display:black;} ul li{list-style:none;} a{text-decoration:underline;} #box{width:200px; height:30px; color:red;} #bottom

jquery定位

阅读更多关于 jquery定位

1、$("div").offset().left ; div到文档的左距离（offset() 方法返回或设置匹配元素相对于文档的偏移） $("div").offset().top; div到文档顶端的距离 $("div").offset().top-$(window).scrollTop; div到可视窗口顶端的距离(用总的距离-滚动的距离可得到) 2、$("div").position().left; 把div转化成类似定位的形式，即把自身的margin去掉，再计算自己到有定位的父级的距离，如果父级都没有定位，则是计算div到文档的距离，top同理。 3、$("div").width() ; div的宽度（不包括内外边距和边框） $("div").innerWidth(); div的宽度加上padding $("div").outerWidth(); div的宽度加上padding+border $("div").outerWidth(true); div的宽度加上padding+border+margin 4、$(document).height() ; 整个文档的高度，宽度同理。 $(window).height(); 可视窗口的高度 $(window).scrollTop(); 滚动条滚动的距离(即滚动条顶端到文档顶端的距离) 当滚动条滚到最低端时：$("document

VueJS和Javascript实现文字上下滚动效果

阅读更多关于 VueJS和Javascript实现文字上下滚动效果

一提到文字上下滚动，我们就会想到用不同的程序去实现，而且页面中有文字滚动会增加这个网页的互动和可信度。 1.Js最简单的方法是控制盒子的高度，使不断的重复添加 <html> <body> <head> /**scroll css**/ #scrolldiv{height: 400px;overflow: hidden;} </head> <div id="scrolldiv" class="scroll"> <ul id="scroll1"> <li>用户130****0834 刚刚砸中<span class="yellow">500元京东卡</span> 正在兑换中</li> <li>用户176****2746 刚刚砸中<span class="yellow">1000美元赠金</span> 正在兑换中</li> <li>用户132****7754 刚刚砸中<span class="yellow">500元京东卡</span> 正在兑换中</li> <li>用户181****4518 1分钟前砸中<span class="yellow">U盘+高级笔+充电宝</span> 正在兑换中</li> <li>用户185****5483 1分钟前砸中<span class="yellow">品牌热销保温杯</span> 正在兑换中</li> <li>用户158****7375

鼠标在网页上的拖动效果

阅读更多关于鼠标在网页上的拖动效果

使用JavaScript写的鼠标拖动效果　　　　近日项目中要做一个鼠标拖拽层的效果，于是手动使用Jquery做了一个，发出来跟大伙儿分享一下，并希望能得到高手的指点，如果哪位大侠觉得我的思路和代码不正确或者需要改进的话，希望能指点一二，在下感激不尽。效果展示下面是我的源代码 <html> <head> <style> div{ width:200px; height:200px; background-color:red; position:absolute; } </style> <script> function getPos(ev){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; // 为了实现兼容性按道理来说在网页的头部加上<!DOCTYPE html>之后，只是用document.documentElement.scrollTop这个就可以了，但是谷歌 // 浏览器却不支持这个，而是支持document.body.scrollTop。由于任何一种浏览器只支持其中的一个，所以两个相加就实现了兼容性了 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

图片模糊+QQ浏览器下滑时候出现“网页由某某提供”影响滑动

阅读更多关于图片模糊+QQ浏览器下滑时候出现“网页由某某提供”影响滑动

1 图片是用2倍图。我这次出现模糊的话：每个图片外套一层div就解决了。（讲不出道理）其中试过把png改成jpg，也没啥用。 2 QQ浏览器打开网页，往下翻，会出现“网页由某某提供”会滑动影响自己的网页效果。去掉办法如下： <script type="text/javascript"> (function(id){ var app = document.getElementById(id); var touchstartY; app.addEventListener("touchstart", function(event) { var events = event.touches[0] || event; touchstartY = events.clientY; //获取触摸目标在视口中的y坐标 console.log("touchstartY:"+touchstartY); }, false); app.addEventListener("touchmove", function(event) { var events = event.touches[0] || event; console.log("end:"+event.changedTouches[0].pageY); var tempY = event.changedTouches[0].pageY -

jQuery浮窗图片到页面中间的代码兼容移动端

阅读更多关于 jQuery浮窗图片到页面中间的代码兼容移动端

jQuery浮窗图片到页面中间的代码兼容移动端 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery漂浮广告代码-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> </style> </head> <body> <div id="imgDiv" style="width:80%;margin:0px auto;z-index:9999"> <div id="a" style="width:40px;height:40px;position:absolute;left:460px;background:salmon;text-align: center;"><font size="+3">×</font></div> <div style="width:80%;margin:0px auto;"><img style="width:90%; height:auto" src="1.jpg"></div> </div> <script> var xin = true, yin = true; var step = 1; var delay = 10; var

博客园美化

阅读更多关于博客园美化

美化是不可能美化的了，大佬们教程又详细，功能又全面，哦呦我超喜欢这里的。本文主要借鉴于静默虚空、 sakuraph 博主，感谢。下面就自己使用的美化功能做些记录。前期准备选择默认主题ThinkInside，禁用模板默认css,申请JS权限。页面布局配色美化此代码放置在页首Html代码中  <script src="https://files.cnblogs.com/files/naughoy/cnblog.js"></script> <link rel="stylesheet" href="https://files.cnblogs.com/files/naughoy/cnblog.min.css" /> 以上文件经修改存于博客文件当中，为防止修改可下载放置与自己博客对应位置再修改链接地址即可（对于js文本内容需要修改以下框选的链接地址和博客名）到此即可实现自动生成文章目录模块，评论区头像显示，快捷操作按钮。细节配置小老鼠控件  <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets

vue 返回滚动位置

阅读更多关于 vue 返回滚动位置

list页面要使用keep-alive，这里再app.vue里判断 app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> router.js 使用history模式 scrollBehavior里是具体代码，一开始是在scrollBehavior里获取 document.documentElement.scrollTop || document.body.scrollTop;但是第一次进入页面的时候滚动页面高度无法获取，所以就在list.vue里 beforeRouteLeave方法里设置高度，然后就可以在scrollBehavior return相应的高度了 export default new Router({ 　　mode: "history", 　　base: "/m/", 　　scrollBehavior(to, from, savedPosition) { 　　return { x: 0, y: to.meta.savedPosition || 0 }; }, routes: [ 　　{ 　　　　path: "/", 　　　

jQuery页面的滚动位置scrollTop、scrollLeft

阅读更多关于 jQuery页面的滚动位置scrollTop、scrollLeft

Web页面常常比显示该页面的浏览器窗口还要大，因为Web文档具有很多内容，往往会导致页面比浏览器还要高，有时候甚至还要宽，这迫使访问者通过滚动来查看整个页面（如图10-8所示）。当访问者滚动页面的时候，一部分文档会从视线中消失。例如，Web页面不能完全放入浏览器窗口中，文档会向左或向上滚动，因此，页面的顶部和左边都会消失在视野之内。这意味着浏览器窗口的左上角和文档的左上角并不相同。如果试图放置一个新元素，例如，屏幕顶部的一个动态Banner；而如果只是试图将元素的left和top位置设置为0，将会遇到麻烦，你实际上只是将其放到了文档的顶部，但是却位于浏览器窗口之外。幸运的是，jQuery提供了两个函数，允许你确定从顶部和左边滚动页面的多少部分（换句话说，文档的多少像素存在于浏览器窗口的上边和左边）。要确定文档的多少部分在浏览器窗口之上，使用如下所示这行代码： $（document）.scrollTop（）要确定文档的多少部分位于屏幕的左边，使用如下所示这行代码： $（document）.scrollLeft（）这两个函数都返回一个像素值，你可以用它来定位页面上的另一个元素。例如，如果你想要将一个弹出窗口定位于页面的中心，即便在某人向下滚动之后也是如此，那么，你需要确定访问者滚动了多远，并且移动弹出窗口，以使得很多额外元素位于页面的下方。在弹出工具的提示的例子中

js缓慢滑块

阅读更多关于 js缓慢滑块

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;} </style> <script> window.onscroll=function() { var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //alert(document.documentElement.clientHeight); //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px'; //alert(document.documentElement.clientHeight); //document.title=oDiv.offsetHeight; //alert(oDiv.offsetHeight); //alert(document

订阅 scrolltop