- 浏览: 13629021 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
点击锚点链接时页面滚动的特效(Javascript Smooth Scroll)
方案一: 简单版
原型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Website Vertical Scrolling with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(function() { $('#scollWin').click(function(){ $('html,body').animate({ scrollTop: $("#scrollToHere").offset().top }, 2000); }) }) </script> <body> <div id="scrollToHere"> Scroll to here </div> <p style="height:1800px;"> The first draft of a law against animal abuse, aiming to protect animals from being hurt or killed in a cruel manner, was completed by a group of experts and was due to be raised for legislation in April, local media reported earlier this year.<br><br> The proposal included jailing people who eat dog meat for up 15 days. While many Chinese enjoy rich dog meat, especially during cold winters, some object to the practice in some regions of beating dogs to death to release the blood into the meat.<br><br> Preserved dog meat is an accepted cuisine in some parts of Guangdong province as certain breeds of dogs are raised up to 3 or 4 months old and slaughtered on farms, local media reported. Eating dog is a socially acceptable practice in parts of southern China .<br><br> Dog meat has been a source of food in some areas of China from around 500 BC, and possibly even earlier.<br><br> Also Read: Amazing Photos of 'Crystal Cave' in Russia [PHOTOS] <br><br> Read related article: China proposes ban on dog meat. will South Korea follow suit?<br><br> MUST READ: Chinese "snake town" raises over 3 million snakes for food (EXOTIC PHOTOS) </p> <input type="button" id="scollWin" value="Scroll up" /> </body> </html>
延伸:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Website Vertical Scrolling with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('.section a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1000); event.preventDefault(); }); }); </script> <div class="section" id="section1"> <a href="#section2">Bottom</a> </div> <p style="height:1800px;"> The first draft of a law against animal abuse, aiming to protect animals from being hurt or killed in a cruel manner, was completed by a group of experts and was due to be raised for legislation in April, local media reported earlier this year.<br><br> The proposal included jailing people who eat dog meat for up 15 days. While many Chinese enjoy rich dog meat, especially during cold winters, some object to the practice in some regions of beating dogs to death to release the blood into the meat.<br><br> Preserved dog meat is an accepted cuisine in some parts of Guangdong province as certain breeds of dogs are raised up to 3 or 4 months old and slaughtered on farms, local media reported. Eating dog is a socially acceptable practice in parts of southern China .<br><br> Dog meat has been a source of food in some areas of China from around 500 BC, and possibly even earlier.<br><br> Also Read: Amazing Photos of 'Crystal Cave' in Russia [PHOTOS] <br><br> Read related article: China proposes ban on dog meat. will South Korea follow suit?<br><br> MUST READ: Chinese "snake town" raises over 3 million snakes for food (EXOTIC PHOTOS) </p> <div class="section" id="section2"> <a href="#section1">Top</a> </div> </body> </html>
方案二: 普通JavaScript
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Smooth Scroll - by www.dezinerfolio.com</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; } body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; } .header_link{ background:#9add19; padding:50px; width:500px; display:block; clear:both; text-align:center; margin:0 auto; } .middle_link{ background:#13aceb; padding:50px; width:500px; display:block; clear:both; text-align:center; margin:0 auto; } .footer_link{ background:#ff8400; padding:50px; width:500px; display:block; clear:both; text-align:center; margin:0 auto; } p{ clear:both; padding:20px; text-align:left; } a{ padding:10px 20px; background:#FFF; border:1px solid #000; color:#000; float:left; text-decoration:none; display:block; height:17px; width:185px; margin-left:15px; } a:hover{ background:#CCC; } </style> <script type="text/javascript" src="smooth.js"></script> </head><body> <div class="header_link"> <h1 style="clear: both; padding: 5px;">Smooth Scroll by Dezinerfolio</h1> <a name="top" href="#footer">GO TO FOOTER</a> <a href="#middle">GO TO MIDDLE</a> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis leo quis metus. Aenean non nulla quis diam cursus ultricies. Vestibulum sagittis. In porttitor est quis elit laoreet blandit. Quisque condimentum eros id nulla. Pellentesque dui nisl, pretium eget, pellentesque nec, faucibus in, dui. Vestibulum quis mi. Maecenas turpis enim, commodo eget, consectetuer ac, posuere in, nisl. Duis elit nunc, molestie euismod, tempus at, condimentum at, nulla. </p> <p>Praesent eget lectus. Donec a nunc in dolor tincidunt rutrum. Phasellus ornare. Vestibulum pulvinar. Morbi massa erat, ornare sed, eleifend aliquet, imperdiet vitae, ligula. Ut nec diam. Phasellus dui felis, dignissim vitae, scelerisque ac, aliquam et, diam. Morbi arcu odio, mattis vel, euismod a, euismod ut, justo. Proin congue consectetuer diam. Maecenas bibendum est in ipsum. In cursus nibh. Proin sit amet nulla. Curabitur non lectus. Vivamus pharetra. Vivamus nec sem. Etiam a ante et sem scelerisque adipiscing. Curabitur sollicitudin. Nulla nec diam at odio fermentum hendrerit. </p> <p>Nunc quis ipsum. Sed suscipit bibendum ante. Phasellus facilisis commodo sapien. Nam vitae nibh quis lacus cursus cursus. Maecenas ac quam a libero adipiscing ultricies. Praesent at nisi ut lectus congue ullamcorper. Proin mattis enim vitae magna fermentum facilisis. Proin id lorem. Aenean ultrices nisi in enim. Aenean interdum, dolor id convallis suscipit, risus est posuere nulla, sed tincidunt est nibh ut enim. Praesent vel purus ac sapien iaculis placerat. Mauris nibh. In feugiat felis. </p> <p>Sed velit elit, rutrum nec, mattis vitae, aliquam eu, pede. Nulla orci nisl, tempor nec, tempor sed, congue rutrum, mauris. Nam sit amet ipsum sed risus auctor ornare. Nullam eleifend libero sit amet diam. Phasellus non eros. Nunc rutrum odio ut sapien. Phasellus ligula neque, pulvinar non, venenatis id, pharetra eget, ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin tortor ligula, dictum a, aliquet ac, vehicula sed, purus. Nulla egestas cursus erat. Sed sollicitudin. </p> <h2>Dezinerfolio</h2> <p>Praesent auctor, eros non varius dapibus, nibh risus molestie orci, et tincidunt justo est sit amet odio. Integer tincidunt feugiat urna. Sed rutrum laoreet risus. Donec vel eros. Mauris laoreet tincidunt libero. Sed sit amet justo id nunc aliquam faucibus. Curabitur erat. Vivamus non nunc. Nunc orci sem, porttitor ultrices, iaculis id, placerat at, felis. Pellentesque ut mauris. Nunc libero arcu, bibendum vitae, hendrerit sit amet, vehicula sed, erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ligula purus, viverra nec, tincidunt eget, venenatis nec, nisi. </p> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas viverra. Curabitur cursus metus non eros. Sed velit. In dapibus nisi sit amet nisl. Nulla aliquam, pede eget fermentum volutpat, elit sapien ultrices sem, a eleifend justo nisi eget purus. Praesent sit amet risus sagittis nisi aliquet eleifend. Sed placerat nulla vel quam. Sed sagittis nibh in augue vehicula aliquet. Suspendisse ac dui eu lacus viverra dictum. Curabitur elementum, magna vitae commodo egestas, turpis lorem sollicitudin lorem, ac auctor sapien lacus a orci. Quisque ornare est id sem. Maecenas placerat, justo in suscipit adipiscing, ante metus ultricies augue, ac sodales eros sapien luctus arcu. Pellentesque lobortis quam non massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <p>Nunc ac orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc pharetra mauris et massa. Praesent cursus fermentum libero. Pellentesque lobortis justo et nulla dictum mollis. Morbi euismod nonummy lorem. Nulla at velit. Pellentesque risus risus, euismod eu, dictum id, iaculis id, tellus. Nullam interdum. Etiam pharetra mollis nisi. Pellentesque interdum, nulla quis fringilla lacinia, leo felis suscipit sem, ac iaculis turpis mi sit amet urna. Nulla mi ante, vehicula non, lacinia a, ornare at, est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent fringilla fermentum nulla. Nulla facilisi. Suspendisse sit amet odio. Etiam ultricies. Pellentesque nibh. Cras nisl. Nulla neque. </p> </div> <div class="middle_link"> <a name="middle" href="#top">GO TO TOP</a> <a href="#footer">GO TO FOOTER</a> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis leo quis metus. Aenean non nulla quis diam cursus ultricies. Vestibulum sagittis. In porttitor est quis elit laoreet blandit. Quisque condimentum eros id nulla. Pellentesque dui nisl, pretium eget, pellentesque nec, faucibus in, dui. Vestibulum quis mi. Maecenas turpis enim, commodo eget, consectetuer ac, posuere in, nisl. Duis elit nunc, molestie euismod, tempus at, condimentum at, nulla. </p> <p>Praesent eget lectus. Donec a nunc in dolor tincidunt rutrum. Phasellus ornare. Vestibulum pulvinar. Morbi massa erat, ornare sed, eleifend aliquet, imperdiet vitae, ligula. Ut nec diam. Phasellus dui felis, dignissim vitae, scelerisque ac, aliquam et, diam. Morbi arcu odio, mattis vel, euismod a, euismod ut, justo. Proin congue consectetuer diam. Maecenas bibendum est in ipsum. In cursus nibh. Proin sit amet nulla. Curabitur non lectus. Vivamus pharetra. Vivamus nec sem. Etiam a ante et sem scelerisque adipiscing. Curabitur sollicitudin. Nulla nec diam at odio fermentum hendrerit. </p> <p>Nunc quis ipsum. Sed suscipit bibendum ante. Phasellus facilisis commodo sapien. Nam vitae nibh quis lacus cursus cursus. Maecenas ac quam a libero adipiscing ultricies. Praesent at nisi ut lectus congue ullamcorper. Proin mattis enim vitae magna fermentum facilisis. Proin id lorem. Aenean ultrices nisi in enim. Aenean interdum, dolor id convallis suscipit, risus est posuere nulla, sed tincidunt est nibh ut enim. Praesent vel purus ac sapien iaculis placerat. Mauris nibh. In feugiat felis. </p> <p>Sed velit elit, rutrum nec, mattis vitae, aliquam eu, pede. Nulla orci nisl, tempor nec, tempor sed, congue rutrum, mauris. Nam sit amet ipsum sed risus auctor ornare. Nullam eleifend libero sit amet diam. Phasellus non eros. Nunc rutrum odio ut sapien. Phasellus ligula neque, pulvinar non, venenatis id, pharetra eget, ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin tortor ligula, dictum a, aliquet ac, vehicula sed, purus. Nulla egestas cursus erat. Sed sollicitudin. </p> <h2>Dezinerfolio</h2> <p>Praesent auctor, eros non varius dapibus, nibh risus molestie orci, et tincidunt justo est sit amet odio. Integer tincidunt feugiat urna. Sed rutrum laoreet risus. Donec vel eros. Mauris laoreet tincidunt libero. Sed sit amet justo id nunc aliquam faucibus. Curabitur erat. Vivamus non nunc. Nunc orci sem, porttitor ultrices, iaculis id, placerat at, felis. Pellentesque ut mauris. Nunc libero arcu, bibendum vitae, hendrerit sit amet, vehicula sed, erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ligula purus, viverra nec, tincidunt eget, venenatis nec, nisi. </p> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas viverra. Curabitur cursus metus non eros. Sed velit. In dapibus nisi sit amet nisl. Nulla aliquam, pede eget fermentum volutpat, elit sapien ultrices sem, a eleifend justo nisi eget purus. Praesent sit amet risus sagittis nisi aliquet eleifend. Sed placerat nulla vel quam. Sed sagittis nibh in augue vehicula aliquet. Suspendisse ac dui eu lacus viverra dictum. Curabitur elementum, magna vitae commodo egestas, turpis lorem sollicitudin lorem, ac auctor sapien lacus a orci. Quisque ornare est id sem. Maecenas placerat, justo in suscipit adipiscing, ante metus ultricies augue, ac sodales eros sapien luctus arcu. Pellentesque lobortis quam non massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <p>Nunc ac orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc pharetra mauris et massa. Praesent cursus fermentum libero. Pellentesque lobortis justo et nulla dictum mollis. Morbi euismod nonummy lorem. Nulla at velit. Pellentesque risus risus, euismod eu, dictum id, iaculis id, tellus. Nullam interdum. Etiam pharetra mollis nisi. Pellentesque interdum, nulla quis fringilla lacinia, leo felis suscipit sem, ac iaculis turpis mi sit amet urna. Nulla mi ante, vehicula non, lacinia a, ornare at, est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent fringilla fermentum nulla. Nulla facilisi. Suspendisse sit amet odio. Etiam ultricies. Pellentesque nibh. Cras nisl. Nulla neque. </p> </div> <div class="footer_link"> <a name="footer" href="#top">GO TO HEADER</a> <a href="#middle">GO TO MIDDLE</a> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis leo quis metus. Aenean non nulla quis diam cursus ultricies. Vestibulum sagittis. In porttitor est quis elit laoreet blandit. Quisque condimentum eros id nulla. Pellentesque dui nisl, pretium eget, pellentesque nec, faucibus in, dui. Vestibulum quis mi. Maecenas turpis enim, commodo eget, consectetuer ac, posuere in, nisl. Duis elit nunc, molestie euismod, tempus at, condimentum at, nulla. </p> <p>Praesent eget lectus. Donec a nunc in dolor tincidunt rutrum. Phasellus ornare. Vestibulum pulvinar. Morbi massa erat, ornare sed, eleifend aliquet, imperdiet vitae, ligula. Ut nec diam. Phasellus dui felis, dignissim vitae, scelerisque ac, aliquam et, diam. Morbi arcu odio, mattis vel, euismod a, euismod ut, justo. Proin congue consectetuer diam. Maecenas bibendum est in ipsum. In cursus nibh. Proin sit amet nulla. Curabitur non lectus. Vivamus pharetra. Vivamus nec sem. Etiam a ante et sem scelerisque adipiscing. Curabitur sollicitudin. Nulla nec diam at odio fermentum hendrerit. </p> <p>Nunc quis ipsum. Sed suscipit bibendum ante. Phasellus facilisis commodo sapien. Nam vitae nibh quis lacus cursus cursus. Maecenas ac quam a libero adipiscing ultricies. Praesent at nisi ut lectus congue ullamcorper. Proin mattis enim vitae magna fermentum facilisis. Proin id lorem. Aenean ultrices nisi in enim. Aenean interdum, dolor id convallis suscipit, risus est posuere nulla, sed tincidunt est nibh ut enim. Praesent vel purus ac sapien iaculis placerat. Mauris nibh. In feugiat felis. </p> <p>Sed velit elit, rutrum nec, mattis vitae, aliquam eu, pede. Nulla orci nisl, tempor nec, tempor sed, congue rutrum, mauris. Nam sit amet ipsum sed risus auctor ornare. Nullam eleifend libero sit amet diam. Phasellus non eros. Nunc rutrum odio ut sapien. Phasellus ligula neque, pulvinar non, venenatis id, pharetra eget, ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin tortor ligula, dictum a, aliquet ac, vehicula sed, purus. Nulla egestas cursus erat. Sed sollicitudin. </p> <h2>Dezinerfolio</h2> <p>Praesent auctor, eros non varius dapibus, nibh risus molestie orci, et tincidunt justo est sit amet odio. Integer tincidunt feugiat urna. Sed rutrum laoreet risus. Donec vel eros. Mauris laoreet tincidunt libero. Sed sit amet justo id nunc aliquam faucibus. Curabitur erat. Vivamus non nunc. Nunc orci sem, porttitor ultrices, iaculis id, placerat at, felis. Pellentesque ut mauris. Nunc libero arcu, bibendum vitae, hendrerit sit amet, vehicula sed, erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ligula purus, viverra nec, tincidunt eget, venenatis nec, nisi. </p> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas viverra. Curabitur cursus metus non eros. Sed velit. In dapibus nisi sit amet nisl. Nulla aliquam, pede eget fermentum volutpat, elit sapien ultrices sem, a eleifend justo nisi eget purus. Praesent sit amet risus sagittis nisi aliquet eleifend. Sed placerat nulla vel quam. Sed sagittis nibh in augue vehicula aliquet. Suspendisse ac dui eu lacus viverra dictum. Curabitur elementum, magna vitae commodo egestas, turpis lorem sollicitudin lorem, ac auctor sapien lacus a orci. Quisque ornare est id sem. Maecenas placerat, justo in suscipit adipiscing, ante metus ultricies augue, ac sodales eros sapien luctus arcu. Pellentesque lobortis quam non massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <p>Nunc ac orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc pharetra mauris et massa. Praesent cursus fermentum libero. Pellentesque lobortis justo et nulla dictum mollis. Morbi euismod nonummy lorem. Nulla at velit. Pellentesque risus risus, euismod eu, dictum id, iaculis id, tellus. Nullam interdum. Etiam pharetra mollis nisi. Pellentesque interdum, nulla quis fringilla lacinia, leo felis suscipit sem, ac iaculis turpis mi sit amet urna. Nulla mi ante, vehicula non, lacinia a, ornare at, est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent fringilla fermentum nulla. Nulla facilisi. Suspendisse sit amet odio. Etiam ultricies. Pellentesque nibh. Cras nisl. Nulla neque. </p> </div> </body> </html>
方案三: Jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery.scrollto演示</title> <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="js/jquery.scrollto.pack.js"></script> <script type="text/javascript"> $(function(){ $("#scrollto_bottom").click(function(){ $('#bottom').ScrollTo(1000); return false;//此句不能少,如果禁用js,将走普通的锚点跳转方式 }); $("#scrollto_top").click(function(){ $('#top').ScrollTo(800); return false;//此句不能少,如果禁用js,将走普通的锚点跳转方式 }); }); </script> </head> <body> <div id="top" style="border:solid 1px red; height:1600px; width:200px;"> <a id="scrollto_bottom" href="#bottom">到底部(速度1000)</a> </div> <div id="bottom" style="border:solid 1px red; height:200px;"> 我是底部<br/> <a id="scrollto_top" href="#top">到头部(速度800)</a> </div> </body> </html>
- smooth_scroll_files.rar (3.6 KB)
- 下载次数: 61
- scrollto.rar (18 KB)
- 下载次数: 55
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1172使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2254当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1170参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1006在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 938从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1543先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3291每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1196原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4451出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1333一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1553一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 817域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2267代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 710代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1587插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 501上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1176javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3565寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1098AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 684AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
jQuery点击锚点链接屏幕滚动代码是一款网页右侧浮动导航点击锚点链接屏幕滚动特效代码。
jquery网页浮动导航点击锚点链接屏幕滚动
最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1、点击导航平滑滚动到导航内容处 2、div内滚动时当前导航需要做响应 代码如下: 1、html结构...
jQuery点击锚点链接屏幕滚动代码是一款网页右侧浮动导航点击锚点链接屏幕滚动特效代码。
基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画...
固定在页面右侧的锚点链接导航菜单,点击对应的导航栏目页面自动滚动到对应的锚链接名所在的位置,当前导航以抽屉式从右往左滑出显示,图标与CSS样式经过了加密处理,如果想要修改的话也可以自行修改使用,主要还是...
一款基于jquery.section-scroll插件实现的网页锚点定位全屏滚动切换特效代码,全屏滚动切换的网站目前挺流行的,这种效果一般用于网站单页介绍。
只需通过平滑滚动增强页面上的锚点。 安装 使用安装: $ component install chameleonui/smoothscroll 应用程序接口 new Smoothscroll ( element , options ) ; 默认值和选项是: var options = { clickEvent...
浏览页面时导航栏到达顶端会吸附,导航栏内有锚点链接内容楼层
下面小编就为大家带来一篇jQuery实现锚点向下平滑滚动特效示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
A锚点导航定位菜单jQuery特效是一款点击右栏信息立即定位到左侧内容特效。
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现。
jquery html锚点链接_a标签当前页面锚点_a标签锚点
导航的滚动锚点
本篇文章主要介绍了JS如何实现在页面上快速定位(锚点跳转问题),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery锚点带动画跳转特效是一款非常实用的特效,实现了jquery锚点带动画跳转和返回顶部,适用于购物商城网站、素材网站,方便定位到相应的模块,增强用户体验效果。