scrollTo和scrollTo.js
最近做一个项目前端要用到scrollTo和滚动视觉差。顺便把两个东西拿出来温习一下。
HTML DOM里面定义了scrollTo方法,用法:scrollTo(xpos,ypos),把内容滚动到当前的指定位置。但是这个充其量只能说是移动而不能说是滚动,似乎没有滑动的效果显示出来。好在JQuery提供了足够多方便的插件,其中一个就能够提供平滑滚动的功能,是平滑哦~
插件叫做jquery.scrollTo.js,当然前提是首先包含jquery的库。而且它自己里面已经封装的很好了,只需要简单的调用作用在标签上的函数就能够实现平滑的滚动,用起来非常的简便。就像下面这样:
- $(function(){
- $(".nav_pro").click(function(){
- $.scrollTo('#pro',500);
- });
- $(".nav_news").click(function(){
- $.scrollTo('#news',800);
- });
- $(".nav_ser").click(function(){
- $.scrollTo('#ser',1000);
- });
- $(".nav_con").click(function(){
- $.scrollTo('#con',1200);
- });
- $(".nav_job").click(function(){
- $.scrollTo('#job',1500);
- });
- });
scrollTo和scrollTo.js的更多相关文章
- JS 相关记录(scrollTo,JSON)
1. window.scrollTo window.scrollTo 有2种语法,比较常见的时候 window.scrollTo(x-coord,y-coord ),其中 x轴坐标与y坐标 第二种为 ...
- JS控制div跳转到指定的位置的解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...
- jquery.pjax.js bug问题解决集锦
jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的aja ...
- js判断浏览器类型和版本
原网址:http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html 除了另无它法,肯定不使用navigator.userAgen ...
- 2.21 JS处理滚动条
2.21 JS处理滚动条 前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了.常见场景:当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到 ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- auto scroll bottom in js
auto scroll bottom in js autoScrollToBottom() { let box = document.querySelector(`[data-dom="ch ...
- scroll js 原生
1.当前位置滚动: document.documentElement.scrollTop 当前位置: 有可能是0 window.scrollTo(,document.documentElement.s ...
- scrollTo & js auto scroll & scrollX & scrollY
scrollTo & js auto scroll & scrollX & scrollY scrollX & scrollY 获取 scroll top height ...
随机推荐
- URLConnection的连接、超时、关闭用法总结
Java中可以使用HttpURLConnection来请求WEB资源. 1. URL请求的类别 分为二类,GET与POST请求.二者的区别在于: a:) get请求可以获取静态页面,也可以把 ...
- [CSAPP笔记][第一章计算机系统漫游]
计算机系统漫游 我们通过追踪hello程序的生命周期来开始对系统的学习—–从它被程序员创建,到系统上运行,输出简单的消息,然后终止.我们沿着这个程序的生命周期,简要介绍一些逐步出现的概念,专业术语和组 ...
- HTML入门基础
前言:学了一段时间的前端,一直没有写博客的习惯,趁着最近学校组织的实训,把知识重新梳理一遍.知识点大部分来自老师上课学习笔记. 1.HTML是什么? HTML 是用来描述网页的一种标记语言. 1)HT ...
- oracle 经典语句集合
1.一列转多行 方法一: select a.id, substr(','||a.name||',',instr(','||a.name,',',1,b.rn)+1, instr(a.name| ...
- 关于Ajax技术中servlet末尾的输出流
Ajax的服务器端用PrintWriter out=resp.getWriter()来响应数据的时候,out.print(0).out.print(1)来表示成功或失败,而不用out.write是有原 ...
- (原)ubuntu16中编译boost1.61.0库
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5797940.html 参考网址: http://www.boost.org/doc/libs/1_61 ...
- javascript 数组学习(一)
今天学习了一下<javascript权威指南(第6版)>的第七章:数组 一.数组的创建: 数组的创建有3种方法: var colors = new Array(3);//可以省略new v ...
- full-background.js
$(window).on('load', function () { $(window).trigger('resize'); }); $(function () { var $window = $( ...
- ubuntu studio
相对于普通的的Ubuntu Linux而言,Ubuntu Studio更适合于多媒体设计人员,也就是说Ubuntu Studio更适合经常搞图片和电脑音乐的Linux爱好者们. Ubuntu Stud ...
- mysql在linux上重启
如何启动/停止/重启MySQL 一.启动方式 1.使用 service 启动:service mysqld start 2.使用 mysqld 脚本启动:/etc/inint.d/mysqld sta ...