对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见。jQuery库已经为我们做了很多的工作了,所以,在jQuery下实现锚点的平滑跳转是简单轻松的。例如,我们要让页面平滑滚动到一个id为box的元素处,则jQuery代码只要一句话,如下:

$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);

jQuery下锚点的平滑跳转的更多相关文章

  1. jQuery之锚点带动画跳转特效

    背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  3. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  4. jQuery实现页内锚点平滑跳转

    当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...

  5. a标签锚点平滑跳转

    一.创建锚点 <div class="header" id="top">//终点标签,添加一个id <a href="#top&qu ...

  6. JQuery 实现 锚点跳转

    $('.nav-jump').click(function() { $('html,body').animate( { scrollTop:$($.attr(this, 'href')).offset ...

  7. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

  8. 【WEB】jQuery获取页面回滚或跳转事件

    1.效果: 2.Jquery: //记得引入jquery.min.js <script type="text/javascript"> $(function(){ wi ...

  9. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. 指令——df

    df是disk free 的简称,这个指令的功能和作用是查看磁盘空间. 可以加上 -h 的选项,来提高可读性. [he@localhost ~]$ df -h文件系统(磁盘名称)      总容量  ...

  2. 041-PHP把闭包函数当做参数传递

    <?php //把闭包函数当做参数传递 function demo($obj){ $obj('我爱PHP'); } # 传一个闭包过去 demo( function($txt){ echo $t ...

  3. 058-PHP中goto语句的使用

    <?php for($i=1;$i<=5;$i++){ //使用for循环循环输出1~5 if($i==3) goto ECH; //当$i为3时候跳出for循环 echo "$ ...

  4. SpringBoot学习(五)——Profile

    Profile是Spring对不同环境(例如开发人用开发环境,测试人员用测试环境)提供不同配置功能的支持,可以通过激活,指定参数等方式快速切换环境 1.多profile文件形式 格式:applicat ...

  5. ACM-Special Array

    题目描述:Special array   输入n和m(20>=m>=n>0)求出所有满足以下方程的正整数数列 i1,i2,...,in,使i1+i2+...+in=m,且i1> ...

  6. Docker 搭建开源跳板机_jumpserver (运维开源堡垒机_jumpserver) Centos_7.0

    最近看到一个开源项目(jumpserver)  很不错  还是用Docker  部署得 ... 抽了点时间拿来学习一下  部署    分析   简单使用一下  ....好了先搭起来 准备 工作:    ...

  7. CGridCtrl 添加button (CGridCellButton类)

    #ifndef __GRID_CELL_BUTTON__ #define __GRID_CELL_BUTTON__ #include "../GridCtrl_src/GridCell.h& ...

  8. NRF52811-QCAA 蓝牙5.1芯片资料解析

    为了满足市场需求Nordic 宣布推出nRF52811系统级芯片(SoC),这个全功能无线连接解决方案支持蓝牙5.1 测向(Direction Finding)功能和一系列流行低功耗无线协议,用于智能 ...

  9. PythonTwo

    格式化输出: % 占位符  s(str 字符串) d(digit 数字)  %% 只单纯显示% Str 索引切片 captlze  首字母大写 upper 全大写 lower 全小写 find 通过元 ...

  10. Android进阶——多线程系列之异步任务AsyncTask的使用与源码分析

    AsyncTask是一种轻量级的异步任务类,它可以在线程池中执行后台任务,然后把执行的进度和最终结果传递给主线程并主线程中更新UI,通过AsyncTask可以更加方便执行后台任务以及在主线程中访问UI ...