jquery刷新页面 自动滑动到页面某一位置怎么写?

当打开这个页面的时候,页面滑动跳转到距离页面顶部100px的id="scroll"的div处,
每次刷新页面的时候也会跳转到此处,这样的jQuery怎么写?谁能告诉我?谢谢!

页面body代码如下:
<body>
<div style="background-color:#ff6600; height:100px;">
</div>
<div id="scroll" style="height:1500px;">
滚动到这里
</div>
</body>

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,并引入jquery。

2、在index.html中的<script>标签,输入jquery代码:

var container = $('body');
var scrollTo = $('#scroll');
container.scrollTop(
scrollTo.offset().top - container.offset().top + container.scrollTop()
);
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

3、浏览器运行index.html页面,此时刷新页面会自动滑动到指定位置。

温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2017-11-25

有 jQuery 一句就足够了。第一个 scrollTop(0) 还原到顶端,防止刷新位置不变。


$("html, body").scrollTop(0).animate({scrollTop: $("#scroll").offset().top});

本回答被提问者采纳
第2个回答  2013-05-08
$(document).ready(function(){
    autoScrollTo();
});
function autoScrollTo() {
    var step = 20; //每次移动的像素
    var time = 100; //移动间隔时间(毫秒)
    var obj = $('#scroll'); //目标
    var top = obj.offset().top;
    var scroll = $(document).scrollTop();
    if (top < scroll) {
        if (scroll - top > step) {
            var next = scroll + step;
        } else {
            var next = top;
        }
        $(document).scrollTop(next);
        if (top < $(document).scrollTop())
            setTimeout(autoScrollTo, time);
    }
}

没测试,你试试看吧

追问

js没有起作用,不过还是谢谢了。

追答

楼上厉害,原来动画这个本身支持滚动条动画啊

第3个回答  2013-05-08
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>test</title>
        <style type='text/css'>
            #demo{position:absolute;left:0;width:100%;height:800px;background:red;display:none;}
        </style>
    </head>
    <body>
        <div id="demo"></div>
        <script type='text/javascript' src="jquery-1.8.3.js"></script>
        <script type='text/javascript'>
            $(function(){
                $("#demo").css({"display":"block","top":$(window).height()})
                $("#demo").animate({
                    top:"100px"
                },2000,"swing")
                                                 
            })
        </script>
                                             
    </body>
</html>

直接复制加载JQ。。看下效果。。不知道是不是你要的效果。。

追问

不是我想要的,不过还是谢谢啦

第4个回答  2013-05-08
写一个js 去控制它来滑动到你想要的位置
相似回答