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 ...
随机推荐
- UIImageView圆角,自适应图片宽高比例,图片拉伸,缩放比例和图片缩微图
/* 设置圆角,通过layer中的cornerRadius和masksToBounds即可. 自适应图片宽高比例.通过UIViewContentModeScaleAsp ...
- [LeetCode] 034. Search for a Range (Medium) (C++/Java)
索引:[LeetCode] Leetcode 题解索引 (C++/Java/Python/Sql) Github: https://github.com/illuz/leetcode 035. Sea ...
- 设置 git config 的一些默认配置
设置 git status的颜色. git config --global color.status auto 一.Git已经在你的系统中了,你会做一些事情来客户化你的Git环境.你只需要做这些设置一 ...
- HTTP协议报文格式
HTTP协议报文格式 接下来我们看看HTTP协议(Hypertext Transfer Protocol――超文本传输协议)浏览器端(客户端)向WEB服务器端访问页面的过程和HTTP协议报文的格式. ...
- Hacker(12)----个人计算机安全防护策略
了解了黑客的常用入侵方法,针对这些方法分别指定对应的防护策略不太现实,因此用户只能掌握个人计算机安全的常见防护策略,以确保计算机处在一个相对安全的环境中.常见个人计算机防护策略有:安装并及时升级杀毒软 ...
- .Net+EF连接Oracle 10、11 开发,ODAC安装配置与使用详解
Oracle数据访问组件 (ODAC) 全称:Oracle Data Access Components 优点:由于微软在.net framework4中会将System.Data.OracleCl ...
- IIS7如何显示详细错误信息
使用Vista或Win7操作系统的用户在不断增加,用Win7旗舰版开发测试程序程序人员也与日俱增,Win7下测试程序时,如果程序出 错,IIS7会提示HTTP Error 500 - Internal ...
- Win8.1系统下安装nodeJS
Nodejs简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js ...
- 创建ListView的基本步骤
参考<疯狂android讲义>第2.5节P94 1.创建一个或者多个ListView <LinearLayout xmlns:android="http://schemas ...
- [原]此程序专用来说明C++模板的用法
#include using namespace std; //此程序专用来说明模版的使用 template void swap1(T& a,T& b){ T temp=a; ...