`

JS回到顶部效果

阅读更多
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="mod-scroll-top-wr" id="mod-right-menu" style="display:block;">
	<a href="###" title="回到顶部" class="mod-scroll-top" id="scrollTop">回到顶部</a>
</div>
<script type="text/javascript">
	//返回头部
	$("#mod-right-menu").hide();
	$(function() {
	    $(window).scroll(function() {
	        //当window的scrolltop距离大于1时,go to top按钮淡出,反之淡入
	        if ($(this).scrollTop() > 1) {
	            $("#mod-right-menu").fadeIn();
	        } else {
	            $("#mod-right-menu").fadeOut();
	        }
	    });
	});
	
	// 给go to top按钮一个点击事件
	$("#scrollTop").click(function() {
	    $("html,body").animate({scrollTop:0}, 800);
	    return false;
	});
</script>

 

分享到:
评论

相关推荐

    javascript 回到顶部效果的实现代码

    本篇文章主要是对javascript 回到顶部效果的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    回到顶部JavaScript插件

    该Demo使用JavaScript开发的一款前端插件,插件的效果是仿京东页面回到顶部效果,本Demo使用原生JS开发,仅限学习使用。

    淘宝taobao内页回到顶部功能js代码

    淘宝的ued一直相当不错,在他的产品内页,当浏览者浏览网页往下滚动网页会很人性化的出现回到顶部按钮。 此代码完全模仿这种效果利用jquery实现,淡进淡出效果等。关闭、打开 滚动动画效果,默认是关闭的,有需要...

    JS实现带动画的回到顶部效果

    本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码,供大家参考,具体内容如下 实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现。点击之后回到网页顶部,按钮隐藏。 代码如下,jQuery引用的是...

    javascript回到顶部特效

    本文实例为大家分享了javascript回到顶部效果,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta ...

    jQuery可爱火箭回到顶部效果代码.zip

    jQuery可爱火箭回到顶部效果代码,当滑动网页到下面的时候,会出现小火箭,到顶部,小火箭消失,点击小火箭有个返回顶部的效果,一般我们在商城网站或者企业网站中经常用到这样的效果,php中文网推荐下载!

    vue.js实现回到顶部动画效果

    最近使用vue.js做了几个页面,其中有一个回到顶部的动画效果记录下。 html如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;回到顶部&lt;/title&gt; &lt;META ...

    js特效脚本含源码和说明jQuery火箭回到星空顶部效果

    js特效脚本含源码和说明jQuery火箭回到星空顶部效果本资源系百度网盘分享地址

    JS火箭返回顶部

    一个国外的网站下载的,点击火箭,返回页面顶部的功能,效果不错,带动画显示,狂霸酷炫,强烈推荐;页面包含JS

    web-回到顶部

    达到回到顶部效果主要原理就是修改滚动条距离顶部的位置为零,滚动条距离顶部的位置介绍: 获取当前页面滚动条纵坐标的位置:document.body.scrollTop与d...

    codewhy项目回到顶部动画效果

    codewhy项目回到顶部动画效果

    原生js实现淘宝首页点击按钮缓慢回到顶部效果

    点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件。要侦听滚动条的变化,所以需要给window添加scroll事件,...

    js实现返回顶部效果

    本文主要介绍了js实现返回顶部效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧

    JS-jquery回到顶部代码-非常简单

    此技术由咿呀网...此代码无版权所有,不管你是商业还是个人,都可放心使用,往下拖动可预览效果。 此代码非常简单,一个js方法,3行CSS代码. 就可以实现效果。 技术交流 QQ群:22160972 邮箱:362217990@qq.com

    百度返回顶部JS源代码+返回顶部图片

    和百度官方的 返回顶部js调用一样效果,图片+js调用源代码

    HTML5 js DIV文字淡入淡出(fadein fadeout)效果.rar

    HTML5 js DIV文字淡入淡出(fadein fadeout)效果,当鼠标放在DIV上的时候,该DIV的背景渐变淡入淡出,效果平滑,更像是Flash动画的效果,用HTML5实现类似的动画效果还是比较轻松的。

    jQuery实现简单而且很酷的返回顶部效果

    当用户浏览很长的页面时,可以通过点击页面右下角的“返回顶部”按钮返回到页面顶部。本文将使用gotoTop.js介绍三种“返回顶部”的效果。

    JS采用绝对定位实现回到顶部效果完整实例

    主要介绍了JS采用绝对定位实现回到顶部效果,以完整实例形式分析了JS定位到页面顶部功能的实现方法,涉及javascript动态操作页面元素与属性的相关技巧,需要的朋友可以参考下

Global site tag (gtag.js) - Google Analytics