scrollTop如何实现click后页面过渡滚动到顶部

用JS操作,body元素的scrollTop

var getTop = document.getElementById("get-top");
var head = document.getElementById("head");
getTop.onclick = function () {
    var time = setInterval(function () {
        document.body.scrollTop = document.body.scrollTop - 50;
        if (document.body.scrollTop === 0) {
            clearInterval(time);
        }
    }, 1);

};

下面不确定,网上找的没实验;

$(window).scroll(function(){
    if ($(window).scrollTop()>100){
        $("#backTop").fadeIn(1500);
    }
    else
    {
        $("#backTop").fadeOut(1500);
    }
    });
    //当点击跳转链接后,回到页面顶部位置
    $("#backTop").click(function(){
        $(‘body,html‘).animate({scrollTop:0},1000);
        return false;
    });
});
时间: 2024-10-10 10:07:35

scrollTop如何实现click后页面过渡滚动到顶部的相关文章

css3如何实现click后页面过渡滚动到顶部

var getTop = document.getElementById("get-top"); var head = document.getElementById("head"); getTop.onclick = function () { var time = setInterval(function () { document.body.scrollTop = document.body.scrollTop - 50; if (document.body.

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发. 之后百度了一下这个问题,原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发. 为了解决开发者需要,建议开发者在touchstart时调用event.preventDe

jQuery页面的滚动位置scrollTop、scrollLeft

Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

h5之scrollIntoView控制页面元素滚动

如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法.scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中.如果给该方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平.如果传入false作为参数,调用元素会尽可能全部出现在视口中(可

h5页面弹窗滚动穿透的思考

可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码: <!-- 弹窗模块 引用时移除static_tip类--> <div class="mask" ontouchstart = "return false" style="display:none"></div> <div class="main_venue_tip" style="displa

js-点击按钮页面滚动到顶部,底部,指定位置

之所以笔记一下这个,因为我在项目中经常用到. $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //页面滚动至顶部 $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); //页面滚动至指定的位置 $('.scroll_bottom').

h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题

项目中遇到了这个问题,说实话 iOS 端问题挺多的,原因找起来比较简单,就是吊起键盘的时候把window的高度挤小了,然后, 关掉键盘页面高度没恢复,安卓手机会自动恢复页面高度. 原因找到了就想解决办法,刚开始想的是 iOS 它不恢复那我也没办法,这属于 iOS 的bug啊或者微信的 bug 啊,但领导不这么想, 页面显示出问题了当然得解决,就在google里翻,也是找到解决方法了,如下链接 微信6.7.4 ios12软键盘顶起页面后隐藏不回弹解决方案 解决方法很简单,让window滚动下就可以

easyui的浮动panel不跟随所在页面一起滚动的问题

项目开发中遇到一个很奇怪的现象就是:随便点开一个下拉控件,包括combo,combobox,databox,combogird等等,都会出现点开的panel面板正常,如果页面有滚动条,一用鼠标滚轮滚动页面,panel的位置就一直固定在原来的位置,不会随着它所属的控件一起移动.由于我们项目是自己修改过easyui的,所以我怀疑的改出来的问题,我就换上原版的easyui就没这个问题了,证明怀疑是对的. 还发现同样一个页面,有个页面有这样的问题,有个页面没有这样的问题,这两个页面唯一的区别就是有问题的

[jquery]判断页面滚动到顶部和底部(适用于手机web加载)

//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = $(document).scrollTop(); var window_height = $(window).height(); if(scroll_top == 0){ alert("到顶啦"); }else if(scroll_top + window_height >= doc