js教程

jquery返回网站顶部缓冲效果

我的站长站 2022-09-21 人阅读

首先来段返回顶部按钮的HTML代码

<div id="goToTop"><a href="javascript:;">点我返回顶部</a></div>

然后就给按钮一个CSS样式,让它浮动在网页右下角,固定住。

#goToTop { 
position: fixed; 
bottom: 20px;
right: 10%; 
}

最后就是js代码了,记得要加载jquery哦

$("#goToTop ").click(function(){
$("html, body").animate({
"scroll-top": 0
}, "fast");
});

点击按钮,返回网页的滚动条到最顶部,animate动画缓冲效果执行。

相关推荐
  • jquery教程
  • 返回顶部
  • jQuery获取file控件中图片的宽高与大小

    jQuery获取file宽高的代码如下,仅在火狐中测试了,其他浏览器兼容性未知。var _URL = window.URL || window.webkitURL;$("#file").change(function (e) { var file, img; if ((file = this.files[0])) { img = new Image(); img.onload = func...

    js教程 128 5年前
  • Jquery实战视频教程 6小时精通Jq
    Jquery实战视频教程 6小时精通Jq

    Jquery实战视频教程 6小时精通Jq,实现小应用,附带教程源码。视频教程列表第7章 自动以Alert第6章 标记完成状态、定时提醒第5章 Task详情第4章 添加及查看Task第3章 细节完善第2章 整体布局第1章 ...

    视频教程 119 4年前
  • JQuery鼠标移动添加删除样式

    JQuery鼠标移动添加删除样式方法,下面为代码案列$("a").hover(function(){ $(this).find("b").show();},function(){ $(this).find("b").hide();})鼠标移到A标签触发事件,下面的B标签显示,后门的function就是鼠标移开隐藏。...

    js教程 109 4年前
  • jquery返回网站顶部方法大全

    1、基础版,只带返回顶部功能<!doctype html><html><head> <meta charset="UTF-8"> <title>返回顶部</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style type=&...

    js教程 30 1年前
  • jquery返回网站顶部缓冲效果

    首先来段返回顶部按钮的HTML代码<div id="goToTop"><a href="javascript:;">点我返回顶部</a></div>然后就给按钮一个CSS样式,让它浮动在网页右下角,固定住。#goToTop { position: fixed; bottom: 20px;right: 10%; }最后就是JS代码了,记得要加载jquery...

    js教程 66 2年前
  • 双击页面任意空白处返回顶部JS代码

    双击页面任意空白处返回顶部JS代码,在所有页面空白处双击左键,自动返回网页顶部。(function() { &#39;use strict&#39;; // 定义一个变量用来记录上次点击的时间 var lastClickTime = 0; // 监听页面的点击事件 document.addEventLis...

    js教程 67 1年前
最新更新
  • js返回上一页、刷新页面代码大全

    返回上一页代码:<a href="javascript:history.go(-1)">返回上一页</a>onclick返回上一页代码:<a href="javasc...

    js教程 2天前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时,会先进行类型转换(type coercion),然后再比较值是否不...

    js教程 6天前
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站,而不再是单个页面,直接把代码放到自己的网站上,如果是博客建议放到header.php头部...

    js教程 3周前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式,一种是通过脚本(Scripts)的方式引入,一种是通过插件(Packages)的方式将自定义的插件内...

    js教程 1个月前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面,主要用到了JS的setTimeout语法。下面是一个定时...

    js教程 1个月前