`

JQ 最少代码实现返回顶部功能

阅读更多

偶写的代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
</head>
<body>
<style>
#goTop{ width: 40px; height: 40px; background: #f60; text-align: center; line-height: 20px; 
color: #fff; position: fixed; bottom: 20px; right: 20px;}
</style>
<div style="height: 3000px;"></div>
<div id="goTop">回到顶部</div>
<script>
$(function(){
	goTop();
});
function goTop(){
	$('#goTop').click(function(){$('html,body').animate({scrollTop: '0'}, 800);});
}
</script>
</body>
</html>

效果图:

 

结果群友(贾顺名)直接写出使用#号的解决方法:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="base.css" />
</head>
<body>
<style>
.goTop{ width: 40px; height: 40px; background: #f60; text-align: center; line-height: 20px; 
color: #fff; position: fixed; bottom: 20px; right: 20px;}
</style>
<script>document.write('<p>some text</p>'.repeat(200));</script>
<a href="#top" class="goTop">回到顶部</a>
</body>
</html>

 效果图:

 

 

 

 

 

 

  • 大小: 34.5 KB
  • 大小: 38.1 KB
1
1
分享到:
评论

相关推荐

    JQ 最少代码实现多图切换

    标题“JQ 最少代码实现多图切换”指的是使用jQuery库来实现一个高效、简洁的多张图片轮播效果。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得开发者能够用更少的代码完成复杂的...

    JQ 最少代码实现全选和不全选

    标题“JQ最少代码实现全选和不全选”涉及到的是如何使用jQuery来控制多选框(checkboxes)的全选与反选功能。这种功能常见于数据管理界面,用户可以快速选择或取消选择所有项目。下面将详细解释这一知识点。 一、...

    JQ 最少代码实现无缝滚动

    **标题:“JQ最少代码实现无缝滚动”** 在网页设计中,为了提供用户更好的浏览体验,无缝滚动效果常被用于长列表或者图片展示。JQuery(简称JQ)作为一个轻量级、功能丰富的JavaScript库,提供了简单易用的API来...

    JQ 最少代码实现选项卡切换

    标题 "JQ 最少代码实现选项卡切换" 涉及到的是使用 jQuery(简称 JQ)库来创建一个简洁的选项卡切换效果。在网页设计中,选项卡是一种常见的用户界面元素,它允许用户在有限的空间内查看多个相关的但不同时显示的...

    JQ 最少代码实现中部浮窗功能

    本篇文章将深入探讨如何利用JQ最少的代码实现中部浮窗(也称中间弹窗或悬浮框)功能。中间浮窗通常用于显示重要的通知、广告或者用户交互内容,它会始终保持在屏幕中央,即使页面滚动也是如此。 首先,我们需要创建...

    JQ 最少代码实现title标签切换内容

    标题 "JQ 最少代码实现title标签切换内容" 指的是使用jQuery库来实现一个功能,即在网页上动态地切换元素的`title`属性内容。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互...

    JQ 最少代码实现当前的星期加时间

    这个标题提到的“最少代码实现当前的星期加时间”,意味着我们要讨论如何使用jQuery来获取当前日期,并显示星期与时间,而且代码量要尽可能地精简。 在JavaScript中,我们可以使用内置的`Date`对象来获取当前日期和...

    JQ 最少代码实现导航的下拉菜单

    在本文中,我们将深入探讨如何使用JavaScript库JQuery(简称JQ)来创建一个高效的、最少代码实现的导航栏下拉菜单。下拉菜单在现代网页设计中是必不可少的元素,它能帮助用户轻松访问网站的多层次结构。下面,我们将...

    弹性返回顶部JQ代码

    "弹性返回顶部JQ代码"是指利用jQuery库实现的这种功能,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画效果的创建。 首先,我们需要理解jQuery的基础知识。jQuery是由John Resig创建的一...

    JQ 最少代码实现带数字和箭头的焦点图

    本主题聚焦于如何使用最少的jQuery代码来创建一个具有数字指示器和箭头切换功能的焦点图。焦点图通常用于在网页上展示一组图片或内容,用户可以通过点击或自动轮播来切换。 首先,让我们了解焦点图的基本结构。它...

    jQuery实现返回顶部

    以上代码片段可以作为一个基础的返回顶部功能实现。然而,实际开发中,可能还需要根据项目需求进行定制,比如改变按钮样式、调整滚动距离阈值,或者添加过渡动画等。 在"返回顶部案例"压缩包文件中,可能会包含一...

    JQ 用最少代码实现瀑布流布局

    在前端开发中,jQuery库提供了简单易用的API,使得开发者能够以最少的代码实现这种布局。 在本文中,我们将深入探讨如何使用jQuery实现瀑布流布局。首先,我们需要理解瀑布流布局的基本原理。通常,它涉及到以下几...

    jQ带返回顶部右侧悬浮客服.zip

    这篇文章将详细讲解如何实现"jQ带返回顶部右侧悬浮客服"这一功能,它结合了JavaScript库jQuery和HTML/CSS技术,适用于商城网站或其他需要在线客服和返回顶部功能的网页。 首先,"jQ"指的是jQuery,一个高效、简洁且...

    jQuery绿色QQ在线客服返回顶部代码.zip

    本文将深入解析“jQuery绿色QQ在线客服返回顶部代码”这一功能,它结合了jQuery库、CSS样式和HTML结构,实现了页面右侧固定悬浮的在线客服及返回顶部功能。 首先,jQuery是一个轻量级的JavaScript库,其核心理念是...

    jQuery 缓冲返回网页顶部JS代码

    下面是一段基础的jQuery代码实现返回顶部功能: ```javascript $(document).ready(function() { // 当滚动条距离顶部小于100px时,显示返回顶部按钮 $(window).scroll(function() { if ($(this).scrollTop() &gt; ...

    JQ轮播图代码,考呗可用

    【标题】"JQ轮播图代码,考呗可用"所指的知识点是关于使用jQuery库实现轮播图效果的编程技巧。jQuery是一款轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在网页设计中,轮播图是一种...

    JQ 简单的返回顶部

    **JQ简单的返回顶部**是基于JavaScript库jQuery实现的一个实用功能,它允许用户在浏览页面时轻松地将滚动条返回到页面顶部。这个功能在网页内容较多、滚动条需要大量滚动时尤其有用,提升了用户体验。在本文中,我们...

    jQ带返回顶部右侧悬浮客服 jQuery带返回顶部右侧悬浮在线客服代码.zip

    这是一个关于使用jQuery实现的前端功能,具体是"带返回顶部和右侧悬浮的在线客服代码"。这个压缩包包含了实现这一功能所需的所有文件。下面将详细解释这个功能涉及到的关键技术点和实现过程。 首先,我们来看jQuery...

    jQuery实现一个动画版返回顶部和底部的效果

    jQuery实现一个动画版缓动返回顶部和底部的效果,里面附有demo,可以根据需求直接修改

Global site tag (gtag.js) - Google Analytics