发表主题您当前位置:首页 / 交流 / JQuery

点击链接平滑到指定位置 滚动插件jquery.smoothScroll

jaes  2019-04-11  0  0  167

点击链接平滑到指定位置 滚动插件jquery.smoothScroll

需要引入文件:jquery.js和smoothScroll.js这两个文件,实例讲解如下:

HTML代码:

<a href="#top" class="gd">顶部</a>
<a href="#service" class="gd">服务</a>
<a href="#footer" class="gd">底部</a>

<section id="top"><div>内容......</div></section>
<section id="service"><div>内容......</div></section>
<section id="footer"><div>内容......</div></section>

JS代码:

$(function(){
	$('.gd').click(function(){
		var toid=$(this).attr('href');
		if(toid=='#top'){
			//直接滚到顶部
			window.scroll({ top: 0, left: 0, behavior: 'smooth' });
		}else{
			//指定到相应位置
			document.querySelector(toid).scrollIntoView({ behavior: 'smooth' });
		}
	});	
})


更多参考:

http://iamdustan.com/smoothscroll/

https://www.cnblogs.com/cherishli/p/6941251.html?utm_source=itdadao&utm_medium=referral

http://amazeui.org/javascript/smooth-scroll

说明:该主题及内容可以随意免费转发,但转发时请注明来源于“哈喽吧”哦^_^。

回复主题

上一篇:jquery ajax 接收返回数据类型(dateType)并处理

下一篇:没有了

最新回复(0)

暂无回复
回复主题
提示:请先登录后再回复主题。
  • 站内搜索
  • 百度搜索
  • 搜狗搜索