jQuery滚动条回到顶部或指定位置

在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便。下面就介绍用jquery实现的滚动到顶部的代码

$(function(){

    //点击id为go_top的元素时网页回到顶部

    $("#go_top").click(function(){

        $(’html,body’).animate({scrollTop:0},1000);//回到顶端

        return false;

    });

});

当然我们也可以返回某个元素的位置,将以上代码写成:

$(’html,body’).animate({scrollTop:$("指定位置").offset().top}, 1000);//定位到该位置

 

jQuery滚动条回到顶部或指定位置的更多相关文章

  1. 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  2. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  3. jQuery实现“回到顶部”按钮功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue 中<vue-scroll >滚动条回到顶部

    今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...

  5. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  6. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  7. 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  8. jQuery跳转到页面指定位置

    @参考博客 var t = $("#id").offset().top;// 获取需要跳转到标签的top值 //$(window).scrollTop(t);// 跳转到指定位置 ...

  9. jQuery之回到顶部

    实现回到顶部的功能,根据学了元素滚动实现,温习知识点. 做之前先理清一下步骤和思路: 1.获得页面的滚动长度 var $page = $("html,body"); var dis ...

随机推荐

  1. windows git的安装配置(转)

    Win7上Git安装及配置过程 http://www.cnblogs.com/sunny5156/archive/2012/10/23/2735799.html   对于需要使用Putty登录的参见 ...

  2. sql for xml 嵌套

    找很久.原来差一个ELEMENTS 关键字. 想到哪里插入子节点.就直接写一条语句,加一个ELEMENTS. 为什么baidu这么就都找不到.到处都是转来转去的东西.郁闷. select h.*,(s ...

  3. [转载] 高效 MacBook 工作环境配置

    原文: http://mp.weixin.qq.com/s?__biz=MjM5NzMyMjAwMA==&mid=208231200&idx=1&sn=8a76ddc56c1f ...

  4. poj1266Cover an Arc(三角形外接圆)

    链接 求出三角形的外接圆,通过圆心和半径可以知道这个圆的上下左右最远点,分别判断这个四个点跟弧的两端点A,B的关系,假如判断P点,弧内给出点为C,判断PC是否与AB相交即可判断出P是否在弧上. 精度问 ...

  5. Js获取当前日期时间及格式化操作

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  6. thinkphp中ajaxReturn方法实现ajax效果

    前台代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. UIImageView 的contentMode属性

    UIViewContentModeScaleToFill UIViewContentModeScaleAspectFit UIViewContentModeScaleAspectFill UIView ...

  8. git 命令行操作

    Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目 这里说一下在命令行对git进行操作 git init [在本地初始化一个git库] //当你的git服务器里面已经有文 ...

  9. [js] 前端性能优化

    原文链接:http://www.cnblogs.com/xxcanghai/p/5205998.html 链接:http://www.zhihu.com/question/21658448/answe ...

  10. 利用SecureCRT上传、下载文件(使用sz与rz命令),超实用!

    利用SecureCRT上传.下载文件(使用sz与rz命令),超实用! 文章来源:http://blog.csdn.net/dongqinliuzi/article/details/39623169 借 ...