`

jquery实现锚点功能

 
阅读更多
/*
* @param _startElem:表示触发或点击的元素 jQuery的选择方式 以字符串传入
* @param _endElem:表示滚动到的位置 jQuery的选择方式  以字符串传入
* @param _speed:表示滚动的速度,毫秒单位 
*
**/

function anchor(_startElem, _endElem, _speed) {
        $(_startElem).click(function() {
        		jQuery(window).unbind("scroll");
        		console.log("to offset:"+$(_endElem).offset().top)
                $('html,body').animate({
                        scrollTop: $(_endElem).offset().top
                },
                _speed);
        });
}


使用方法如下:

function initAnchor(){
	var initList = ["todays","hot","forenptice","new"];
	for(var num in initList){
		anchor("#anchor_mod_"+initList[num],"#mod_"+initList[num],1000);
	}
}

在你需要锚点导航的地方和需要到达的地方对应加上ID,然后用anchor方法初始化即可
分享到:
评论

相关推荐

    jQuery插件 jQuery 实现网页报纸的区域锚点提示功能

    jQuery 实现网页报纸的区域锚点提示功能 漂亮啊……

    原创左右两列框架锚点滚动Jquery插件

    此插件把一个简单网站的所有功能都集成在一个页面上,利用锚点的方式滑动到相应的菜单对应的模块,非常实用,是一种新型的设计模式,值得借鉴,网友可以学习哦。

    某报社电子报纸热点(锚点)功能实例演示.rar

    某报社电子版报纸热点(锚点)功能实例演示,jquery实现的电子报纸特效,主要是实现了电子版的锚点功能,报纸上的每一块对应一个内容,对应一个锚点,鼠标滑上去的时候,会弹出对应的提示,并链接及打开指定的电子报...

    vue实现吸顶、锚点和滚动高亮按钮效果

    因公司后台管理系统很多功能技术老旧,最近在用vue重构公司的后台管理系统,在做商品管理添加商品这一块,借鉴淘宝的添加商品的交互,需要实现一个简单的吸顶、锚点和滚动高亮按钮的效果。 需求 滚动页面到顶部,...

    jQuery实现平滑滚动到指定锚点的方法

    本文实例讲述了jQuery实现平滑滚动到指定锚点的方法。分享给大家供大家参考。具体如下: 定义好指定的anchor锚点,调用下面的js代码可以让页面平滑的滚动到指定的位置,非常实用,比如返回页面顶部,去往页面底部等...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载...

    jQuery 电子报(杂志)区域锚点提示功能

    内容索引:脚本资源,jQuery,电子报,锚点 使用jQuery 实现在线看报,鼠标移到电子报或电子杂志的某个区域后,会出现一个红色的边框以示选中,并显示出此区域的提示内容,点击后则开始加载报纸内容。原理解析:我们...

    超实用的jQuery代码段

    第5章 jQuery实现用户输入自动完成功能 5.1 最简单的用户输入自动完成 5.2 使用远程数据源的自动完成 5.3 带缓存的自动完成 5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维...

    jQuery实现返回顶部功能适合不支持js的浏览器

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。 首先需要在顶部添加如下html元素: <p id=back-to-top><a><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a>...

    jquery实现仿京东楼梯效果(比较全面的)

    一个不用管点击效果直接通过锚点连接到导航的那个部分,一个是写了一个点击函数让他跳转过去。 我们需要记住点击也会触发滚动。他可能执行两个函数,所以选中的状态加个样式只在一个里面写,在滚动时写。

    js+JQuery返回顶部功能如何实现

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。 首先需要在顶部添加如下html元素: ”back-to-top”><a><span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a></a>的锚点,...

    jQuery 实现侧边浮动导航菜单效果

    1、点击菜单项,网页滚动到对应位置,可简单通过锚点实现; 2、滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了; 计算 scrollTop 和 各个 div 的 offsetTop 的...

    一个jQuery特效,鼠标放图片上,显示提示框

    摘要:脚本资源,jQuery,图像热点,提示框 这个小插件用于当鼠标移到图片上时,在图片上显示一个或多... 当然这些提示框是可以加注文字的,有点像电子报纸的图像热点、锚点功能,不明白的朋友,可大致看下截图就明白了。

    jQueryScrollMenu.zip

    这个插件示例实现了锚点定位导航功能,锚点其实就是可以让页面定位到某个位置上的点,在高度较高的页面中会经常见到。比如百度百科以及一些帮助文档都会使用到锚点链接。

    JS实现带导航城市列表以及输入搜索功能

    本文实例为大家分享了JS实现带导航城市列表以及输入搜索功能展示的具体代码,供大家参考,具体内容如下 实现功能: 1.加载城市列表,并生成索引(没有该索引的城市则无索引) 2.点击索引滚动页面到对应索引城市第一...

    jquery利用拖拽方式在图片上添加热链接

    用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签...

    jQuery 浮动导航菜单适合购物商品类型的网站

    1、点击菜单项,网页滚动到对应位置,可简单通过锚点实现; 2、滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了; 计算 scrollTop 和 各个 div 的 offsetTop 的...

Global site tag (gtag.js) - Google Analytics