`

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>

 

分享到:
评论

相关推荐

    js返回顶部效果 很炫

    "js返回顶部效果,很炫"指的是在实现这一功能时,通过创意和动态的视觉表现,使返回顶部的交互变得更具吸引力。 要实现这个炫酷的JavaScript返回顶部效果,我们可以遵循以下步骤: 1. **创建HTML元素**:首先,...

    JavaScript回到顶部功能实现

    总结来说,实现JavaScript回到顶部功能的关键在于监听滚动事件、判断滚动位置以及响应点击事件。通过结合HTML、CSS和JavaScript,我们可以创建一个既实用又美观的"回到顶部"功能,提升用户的浏览体验。

    回到顶部页面上下弹动效果

    当用户点击这个按钮时,我们不希望页面瞬间跳回顶部,而是希望有一个平滑的动画效果。这可以通过修改页面的 scrollTop 属性实现。我们可以设定一个定时器,每隔一定时间(如每5毫秒)减少或增加 scrollTop 的值,...

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

    这可以通过JavaScript来实现,而本篇文章主要介绍了一种用JavaScript实现回到顶部效果的代码实现方法。以下是这篇文章中包含的知识点: 1. JavaScript实现回到顶部的基本原理: 实现回到顶部的效果,主要利用了...

    JS CSS 回到顶部

    在这个"JS CSS实现回到顶部代码"的主题中,我们将探讨如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 来创建这样一个功能。 首先,我们需要在HTML中添加一个元素,作为回到顶部的触发器。这个元素可以是...

    回到顶部 js 实现

    然后,我们使用JavaScript来监听滚动事件并根据页面位置控制“回到顶部”按钮的显示和隐藏。当用户向下滚动一定距离后,按钮显示;当用户向上滚动时,按钮隐藏。可以使用以下代码: ```javascript document....

    js+css实现回到顶部按钮(back to top).docx

    "JS+CSS实现回到顶部按钮(Back to Top)" 通过本文,我们可以学习到使用JS和CSS实现回到顶部按钮的方法。这个功能可以在页面滚动时出现一个回到顶部的按钮,以便用户快速回到页面的顶部。 首先,我们需要在HTML中...

    jquery回到顶部效果

    在`回到顶部效果.js` 文件中,我们可以这样编写代码: ```javascript $(document).ready(function() { var backToTop = $('#back-to-top'); // 当页面滚动超过100像素时显示按钮 $(window).scroll(function() ...

    回到顶部JavaScript插件

    【回到顶部JavaScript插件】是一种常见的前端功能,用于在用户滚动页面到底部时提供便捷的返回页面顶部的按钮。在网页设计中,特别是在内容丰富的页面上,这种功能大大提升了用户体验,因为它允许用户快速回到页面的...

    带平滑效果的js返回顶部特效.zip

    这个“带平滑效果的js返回顶部特效”就是一种创新的实现方式,旨在为用户带来更加流畅和舒适的浏览体验。下面将详细介绍这个特效的实现原理、主要技术点以及如何在实际项目中应用。 首先,我们来解析这个特效的核心...

    JS 简单的点击返回顶部的功能

    在JavaScript编程中,"点击返回顶部"功能是一个常见的交互设计,它允许用户通过单击一个按钮迅速滚动到页面的顶部,提升用户体验。本教程将详细解释如何实现这一功能。 首先,我们需要在HTML中创建一个返回顶部的...

    js简洁客服和返回顶部右侧漂浮代码,有动画效果,兼容主流浏览器

    2. **返回顶部功能**:这是一个常见的网页导航辅助工具,当用户滚动页面到底部时,页面右侧会出现一个返回顶部的按钮,点击后页面平滑滚动回顶部。这个功能也是通过JavaScript实现,通常会监听滚动事件,当用户滚动...

    jQuery实现回到顶部按钮效果

    在`js/gotoTop.js`中,我们监听滚动事件,当页面滚动到一定距离时显示按钮,点击按钮时则将页面滚动回顶部: ```javascript $(document).ready(function() { // 当页面加载完成后,隐藏返回顶部按钮 $("#gotoTop...

    js动态返回顶部

    在本案例中,"js动态返回顶部"指的是利用JavaScript实现一个功能,即当用户在浏览网页时,页面滚动到一定位置后,提供一个“返回顶部”的按钮,点击该按钮可以使页面瞬间滚动回顶部。 首先,我们需要在HTML文件中...

    JS火箭返回顶部

    总的来说,"JS火箭返回顶部"是利用JavaScript和HTML实现的一种网页交互设计,它不仅提供了实用的导航功能,还通过动画效果增强了用户体验。对于前端开发者来说,理解和实现这样的功能有助于提升网页的互动性和吸引力...

    最好的回到顶部插件gotoTop.js实例

    当用户向下滚动页面到一定程度时,一个通常设计为箭头或向上手势的按钮会出现在页面底部,点击这个按钮,页面就会瞬间滚动回顶部,极大地提升了浏览效率。 在实例中,我们可以看到作者libin_1在CSDN博客上分享了...

    回到顶部JS代码

    接下来是关键的JS部分,我们需要监听滚动事件,当页面滚动到一定距离时显示“回到顶部”按钮,点击按钮时则使页面滚动回顶部。以下是一个简单的实现: ```javascript document.addEventListener('DOMContentLoaded'...

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

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

    页面回到顶部滑动效果

    在网页设计中,"页面回到顶部滑动效果"是一种常见的用户体验优化功能,它允许用户轻松地将浏览的页面瞬间滚动回顶部,而无需手动滚动鼠标或触摸屏幕。这个功能尤其在长篇内容的网页中非常实用,比如博客、论坛或者...

    回到顶部的demo

    在网页开发中,实现“回到顶部”的方法多种多样,可以是JavaScript、jQuery或者其他前端框架如Vue或React等。从提供的描述来看,这个“超强的回到顶部demo”应该是一个可直接运行的示例,包含了完整的代码,适合...

Global site tag (gtag.js) - Google Analytics