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

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

页面body代码如下:
<body>
<div style="background-color:#ff6600; height:100px;">
</div>
<div id="scroll" style="height:1500px;">
滚动到这里
</div>
</body>
展开
 我来答
幻翼高达Zero
2019-07-15 · TA获得超过1.7万个赞
知道答主
回答量:499
采纳率:0%
帮助的人:8.2万
展开全部

需要准备的材料分别有:电脑、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页面,此时刷新页面会自动滑动到指定位置。

马后雷鼓下扬州5058
推荐于2017-11-25 · TA获得超过4321个赞
知道小有建树答主
回答量:693
采纳率:33%
帮助的人:808万
展开全部

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


$("html, body").scrollTop(0).animate({scrollTop: $("#scroll").offset().top});
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友a19d193
2013-05-08 · TA获得超过3446个赞
知道大有可为答主
回答量:1464
采纳率:100%
帮助的人:1446万
展开全部
$(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没有起作用,不过还是谢谢了。
追答
楼上厉害,原来动画这个本身支持滚动条动画啊
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友08a61832
2013-05-08 · TA获得超过739个赞
知道小有建树答主
回答量:178
采纳率:100%
帮助的人:83.6万
展开全部
<!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。。看下效果。。不知道是不是你要的效果。。

追问
不是我想要的,不过还是谢谢啦
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
yyg291906351
2013-05-08 · 超过73用户采纳过TA的回答
知道小有建树答主
回答量:392
采纳率:50%
帮助的人:123万
展开全部
写一个js 去控制它来滑动到你想要的位置
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式