首页
网站首页
公司简介
资讯中心
推荐内容
返回顶部
jquery仿京东导航,网页中返回顶部代码另附注释说明_jquery_脚本之家
发布时间:2019-12-28 20:34
浏览次数:

下面就说下简单的返回顶部效果的代码实现,附注释说明。 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 复制代码 代码如下: 返回顶部 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) 复制代码 代码如下: 返回顶部 缺点:返回效果是立即的,不符合一般浏览页面的滚动感觉; 静态固定于页面底部,用户不一定看得到。 2. 简单的静态返回顶部,用js模拟滚动效果上滑至顶部 复制代码 代码如下: function pageScroll(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy; //延时递归调用,模拟滚动向上效果 scrolldelay = setTimeout; //获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为0,所以取和值可以得到网页的真正的scrollTop值 var sTop=document.documentElement.scrollTop+document.body.scrollTop; //判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面) if clearTimeout; } 复制代码 代码如下: 返回顶部 缺点:滚动效果不平滑,且在页面很长时点击返回顶部,未向上到达页面顶部无法再正常浏览页面; 同上依旧是静态固定于页面底部,不一定能曝光在用户面前。3. 动态按需加载返回顶部,css侧边屏幕绝对定位,结合简单jQuery动画实现更好体验 复制代码 代码如下: function gotoTop{ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '

复制代码 代码如下: document.onkeypress = function{ alert; }; function getCharCode{ var e = e || window.event; if( typeof e.charCode == "number" ){ return e.charCode; }else{ return e.keyCode; }; };

纯JS五子棋 效果图: 代码下载 HTML代码 复制代码 代码如下:

在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局。京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下:

返回顶部

五子棋

  • baidu
  • goolge
  • yahoo
  • microsoft
友情链接: 网站地图
Copyright © 2015-2019 http://www.nflfreepicks.net. 新葡萄京娱乐场网址有限公司 版权所有