jQuery滑动到锚点

<map name="Map">    <area shape="rect" coords="6,13,149,78" href="#bottom">    <area shape="rect" coords="5,117,144,148" href="#t1">    <area shape="rect" coords="3,149,146,180" href="#t3">    <area shape="rect" coords="4,181,145,212" href="#t2">    <area shape="rect" coords="4,212,141,244" href="#t4">    <area shape="rect" coords="3,242,144,273" href="#t5">    <area shape="rect" coords="3,272,142,309" href="#t6">    <area shape="rect" coords="4,308,144,345" href="#t7">    <area shape="rect" coords="5,347,149,404" href="#t8">    <area shape="rect" coords="6,84,142,117" href="#bottom">  </map>

jQuery(function($) {    

    $("map[name=‘Map‘] area").click(function() {    

        $("html, body").animate({    

            scrollTop: $($(this).attr("href")).offset().top

        }, 1500);    

        return false;    

    });    

});

时间: 2024-10-03 13:19:54

jQuery滑动到锚点的相关文章

使用jquery滑动到锚点

( function( $ ) { // 找到当前位置 $('a.scroll-link').click(function(e){ e.preventDefault(); $.scrollTo( $(this).attr("href"), { duration: 1000, easing:'swing' }); }); } )( jQuery );

jQuery滑动方法

jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素. 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选

jQuery滑动导航菜单

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta name="author" content="abangsir" /> <title>jQuery弹性滑动导航菜单</title> <style type="text/css"> body{ font-famil

一款基于jquery滑动后固定于顶部的导航

之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1> Scroll down</h1> <h2> And watch the menu bar</h2> <nav id="menu"> <h1 id="site

jQuery 滑动改变价格

jQuery 滑动改变价格 演示 XML/HTML Code <section id="content" > <div class="cube"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class=&qu

jQuery 滑动菜单效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{ padding:0; margin:0; } ul,li{ list-style:none; } .nav{ height:30px; background:rg

jQuery滑动解锁

unlock.js是一款jQuery滑动解锁插件.目前很多网站在用户登录和注册时,为防止恶意攻击,采用来滑动解锁的验证方式.用户需要滑动指定的滑块到指定位置,才能通过验证.unlock.js可以实现这种滑动解锁功能. 查看演示 下载源码 unlock.js插件具有以下特点: 滑动解锁. 尺寸.颜色.字体大小等都可以个性化定制. 完成解锁后会有回调函数,用来触发进一步的数据处理. 如何使用 1. 首先在页面中引入unlock.css和unlock.js文件. <link href="css/

FlexSlider是一个非常出色的jQuery滑动切换插件

FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看! $(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Select your animation type, "fade" or "sl

适合移动设备的jQuery滑动按钮插件

这是一款非常实用的jQuery滑动按钮插件.该滑动按钮插件可以将input元素转换为滑动按钮样式.插件中使用javascript来控制滑动按钮的滑动,样式使用纯CSS来制作. 该jQuery滑动按钮插件可以在支持jQuery 2的浏览器上工作,IE6-8不支持该插件. IE9不支持CSS transitions,在IE9上不会有动画效果. 该滑动按钮支持Pointer.触摸屏和鼠标点击. 在线演示:http://www.htmleaf.com/Demo/201502241416.html 下载地