jquery回到顶部插件,平滑返回顶部

不多说,jquery版的回到顶部插件,支持滚动条拖到下方开始出现(淡入淡出),单击平滑回到顶部,看一下说明。

插件说明:

参数设置
   startline : 出现返回顶部按钮离顶部的距离
   scrollto : 滚动到距离顶部的距离,或者某个id元素的位置
   scrollduration : 平滑滚动时间
   fadeduration : 淡入淡出时间 eg:[ 500, 100 ] [0]淡入、[1]淡出
   controlHTML : html代码
   className :样式名称
   titleName : 回到顶部的title属性
   offsetx : 回到顶部 right 偏移位置
   offsety : 回到顶部 bottom 偏移位置
   anchorkeyword : 猫点链接
引入文件:
<script type="text/javascript"
	src="http://www.rainleaves.com/js/jquery-1.6.1.min.js">
</script>
<script type="text/javascript"
	src="http://www.rainleaves.com//js/jquery.scrolltotop.js">
</script>
调用方法:
<script type="text/javascript">
	jQuery(function($){
   	$.scrolltotop({
   	className: 'totop',
   	controlHTML : '<a href="javascript:;">回到顶部↑</a>',
   	   	//此处可以换成图片如 '' ,
   	//controlHTML : <img style="width: 24px; height: 24px;"
		src="http://www.rainleaves.com/go-top.png"/>',
		//此处可以换成下面的图片格式
   	offsety:0
   });
});
</script>

效果见本站右下角。

下载:jquery.scrolltotop.js

马上分享给你的朋友吧~

jquery回到顶部插件,平滑返回顶部》上有 24 条评论

  1. 能问一下为什么我用的时候,功能正常,但报jquery.scrolltotop.js页第20行,jQuery未定义是为什么呢?

    • 提示这个,是不是因为你在引入插件的时候,jquery还没有加载完成啊,不过很奇怪,功能却正常,那是不是有重复引用。有地址吗,我可以帮你看一下!

      • 不好意思,找到问题了,jquery-1.6.1.min.js引用位置的问题。多谢!

  2. 是不是因为我同时用了你那个input输入框为空时,添加默认提示jquery插件的原因,因为我不同时用就没事。

      • 插件里函数togglecontrol错了,
        if (!$cssfixedsupport){
        this.keepfixed();
        }
        在前面可以查到keepfixed这个函数的作用就是设置返回顶部按钮的left和top属性值的,不需要前面的this关键字指代其他东西,去掉就可以了。
        不过这个插件在IE6里有抖动感呢,

  3. 不好意思,我现在弄明白了 O(∩_∩)O,设置offsetx和offsety的值。

    • ie8正常 ie7和兼容模式ie8不行 对象不支持此属性和方法 谷歌火狐正常

  4. 你这网站ie789都js报错 chrose正常网页错误详细信息

    用户代理: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
    时间戳: Mon, 19 Aug 2013 10:01:39 UTC

    消息: 缺少标识符、字符串或数字
    行: 190
    字符: 3
    代码: 0
    URI: http://www.rainleaves.com/wp-content/themes/rainleaves/js/jquery-plugs.js

    消息: 对象不支持此属性或方法
    行: 737
    字符: 3
    代码: 0
    URI: http://www.rainleaves.com/html/1027.html

  5. 导入jquery.js
    在a标签,命名一个id=“top”
    然后

    $(‘#top’).click(function(){$(‘html,body’).animate({scrollTop: ’0px’}, 800);return false;});

    一句就搞定的,你弄那么多

  6. 不错,不过现在看不到了,是移走了?
    另外,楼主的网站需要长时间请求google fonts服务(因为它被墙了),进而拖慢网站的加载速度,建议禁用它或者换个字体请求地址吧。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>