jquery点击滑动到某个位置

转载于 2016-08-15 15:58:22 发布 · 5.8k 阅读

Java 同时被 2 个专栏收录

29 篇文章

订阅专栏

随记

21 篇文章

订阅专栏

本文介绍了一个简单实用的jQuery函数，用于实现页面平滑滚动效果。该函数支持默认返回顶部的功能，同时也允许用户指定任意元素作为滚动目标，并可自定义滚动速度。

原文链接： http://caibaojian.com/jquery-scrollto.html

比较常用的一个功能，只需要一个简单的函数就可以滑动到任意你需要的地方，默认点击之后是返回顶部。

function scrollTo(ele, speed){
	if(!speed) speed = 300;
	if(!ele){
		$("html,body").animate({scrollTop:0},speed);
	}else{
		if(ele.length>0) $("html,body").animate({scrollTop:$(ele).offset().top},speed);
	}
	return false;
}

使用方法：

1.滑动到顶部，速率为0.3秒

scrollTo();

2.滑动某个元素的位置。

a.滑动id为item scrollTo('#item',300);

b.滑到某个标签item scrollTo('.item');

javascript版本

或者某个元素offsetTop兼容代码

//code from http://caibaojian.com/jquery-scrollto.html
function getElementPosition(e) {
            var x = 0, y = 0;
            while (e != null) {
                x += e.offsetLeft;
                y += e.offsetTop;
                e = e.offsetParent;
            }
            return { x: x, y: y };
        }