jquery 页面滚动实现锚点平滑跳转功能

JQuery实现锚点平滑滚动

一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a>标签跳转到 id为content的指定位置那里. <a id="turnToContent" href="#content"></a> 然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章.最好将此d

jQuery实现页内锚点平滑跳转

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

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

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”. 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/37.htm HTML文件代码: <!DOCTYPE html> <html> <head> <meta charset=

jquery页面滚动显示浮动菜单栏锚点定位效果

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery页面滚动浮动导航切换代码

jquery页面滚动到指定id

//jquery页面滚动到指定id $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');// 这行是 Opera 的补丁, 少了它 Opera 是直接用跳的而且画面闪烁$body.animate({ scrollTop: $('#指定ID').offset().top }, 1000);

jQuery页面滚动监听事件及高级效果插件

jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scroll_demo.html 2. Scrolld(更不好用)https://github.com/charliegeiger89/Scrolld.js#readme 3. Animate Scroll(参数太少,不好用)https://github.com/ramswaroop/animatescrol

jquery 页面滚动到底部自动加载插件集合

很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件. 2. jQuery Screw Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件. 3

a标签锚点平滑跳转

一.创建锚点 <div class="header" id="top">//终点标签,添加一个id <a href="#top" class="fixed_top_a">^</a>//a标签href添加#id 锚点跳转很生硬,很不友好,找了两种平滑的跳转方法二.平滑跳转 $('a[href*=#],area[href*=#]').click(function () { if (locati

jquery 页面滚动tab自动定位，tab与内容对应

直接上源码,基于jquery写的,可以直接跑起来. 原理是先计算出页面元素对应的高度.页面滚动时计算tab对应的高端区间,设置具体的tab.欢迎指正下载地址 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=devic

jquery页面滚动，菜单固定到顶部

// 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定 if(scroH>=navH){ $("#topp").css

jQuery页面滚动右侧浮动导航切换

体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"

[HTML/JS] JQuery 页面滚动回到顶部

HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; display:block;"> 上升按钮 </div> </body> </html> JS: $(function(){ //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () { $(window).scroll(fun

jQuery页面滚动图片等元素动态加载实现

一.关于滚动显屏加载常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量多,而且比较大,少说百来K,多则上兆.要是页面载入就一次性加载完毕.乖乖,估计黄花都变成黄花菜了.所以,我们得做点什么,避免这种糟糕的状况发生.目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,随着页面的滚动,这个要显示图片的区域进入了浏览器可是窗口范围,则触发图片的加载显示.

[转]jQuery页面滚动图片等元素动态加载实现

本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量多,而且比较大,少说百来K,多则上兆.要是页面载入就一次性加载完毕.乖乖,估计黄花都变成黄花菜了.所以,我们得做点什么,避免这种糟糕的状况发生.目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是

Jquery页面滚动动态加载数据，页面下拉自动加载内容

<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px var ele

jQuery页面滚动底部加载数据

$(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight == scrollHeight) { //此处是滚动条到底部时候触发的事件,在这

jQuery页面滚动数字增长插件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="jQuery.running.css" /> <style> ul,li{list-style: none;} h3{font-size: 50px;} ht

jQuery 页面滚动吸顶和吸底

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="" style="width: 600px;margin: auto"> <div class="top"> 我是顶部

AngularJS 实现页面滚动到底自动加载数据的功能

要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(

AngularJS：实现页面滚动到底自动加载数据的功能

要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(

用jquery实现平滑的页面滚动效果

通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquery代码如下: $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, ''

jquery 页面滚动实现锚点平滑跳转功能

热门专题