Javascript 将Div滚动到特定位置

我有一个12个月的日历在一个可折叠的div中，这样一次可以看到两个日历月。旁边是一个每周计划

---

点击图片查看更大的图片

在页面的顶部菜单中，用户可以更改显示的周数。这些是以周数和年为参数的链接

我需要的是，当用户导航到一周时，左div滚动到相应的月份。我怎样才能做到这一点

---

用一些算法来计算你的身高，这很简单，比如（总身高）*（特定周的slNo）/（周数），就像这样，我已经实现了类似的事情，我就是这样做的，这样对我来说很方便

在jquery中使用scrollTop 加上这样的东西

      $("#Div").animate({ scrollTop: 500)}, 1000)// replace500- your height


     ("#Div")[0].scrollHeight) // this will give you total height of scrollable area

---

这可以像这个算法一样完成。你必须找到下一个月

$(document).ready(function()
{
    // Write this code under click event. and set goto variable assign here
    var goto="Feb";
    $('#calendar_container').animate({scrollTop:$("#"+ goto).offset().top},400 );
});

您需要为日历的每个月定义ID 例：

• 一月日历ID为“一月”
• 二月日历ID为“二月”
  喜欢

---

然后将goto变量EQUEULEUS设置为您的ID

Hrmf。不知道你们在网站上有链接，只是在查看对你们的问题所做的编辑时偶然发现的。同时也忽略了一个事实，那就是只有点击顶部的菜单才能改变周数。但是，无论如何，这里有一个更新：

---

考虑到您的标记和链接逻辑+使用jQuery的事实，一个建议是：

为每个日历月添加

id

在DOM就绪时（已加载文档），检查URL week/year并计算month

通过

id

查找日历

为div wrap holding calendar设置

scrollTop

1。）ID必须是唯一的。在标记中，所有月份表都有

id=“example”

。将此更改为，例如：

id="cal_month_01"
id="cal_month_02"
id="cal_month_03"
...

2,3,4。）从URL获取日期并进行滚动：

// Get date from year / week.
function week2date(y, w, isoSunday) {
    var d = new Date(y, 0, 1 + (w - 1) * 7);
    if (isoSunday) {
        d.setDate(
            d.getDay() < 5 ?
            d.getDate() - d.getDay() :
            d.getDate() + 7 - d.getDay()
        );
    }
    return d;
}

function scrollMonth() {
    // Get year and week from URL-(window)-location.
    var year = window.location.href.match(/\byr=(\d{4})\b/);
    var week = window.location.href.match(/\bwk=(\d+)\b/);
    if (week && year) {
        // Get month from year / week.
        // Months start at 0 in JavaScript
        var date = week2date(year[1], week[1], true).getMonth() + 1;
        // Make ID, zero pad month.
        var id = 'cal_month_' + ('0' + month).substr(-2);
        var $cal = $('#mini_Calendar');
        // Do the scroll.
        // Note that you need to subtract offset top for container.
        $cal.animate({
            scrollTop: $('#' + id).offset().top - $cal.offset().top
        }, 200);
    }
}

// Execute when document ready.
$(document).ready(scrollMonth);

这几个星期：

<div id="week">
   <ul>
       <li data-date="2013.1.1">1</li>
       <li data-date="2013.1.2">2</li>
       <li data-date="2013.1.3">3</li>
       ...
</div>

1
2
3
...

要滚动，可以执行以下操作：

function target(e) {
    var t = e.target || e.srcElement;
    if (t.nodeType === 3) 
        t = t.parentNode;
    return t;
}
function scrollCalendar(e) {
    function scroll(e) {
        e.parentElement.scrollTop = e.offsetTop - 5;
    }
    e = e || window.event;
    var t = target(e), 
        date = t['data-date'], 
        cal, cal_m, sel_m, i;
    if (date) {
        // Calendar container
        cal   = document.getElementById('calendar');
        // One div for each month.
        cal_m = cal.getElementsByTagName('DIV');
        // Date from week-view 
        date  = date.split('.');
        sel_m = +date[1];
        for (i = 0; i < cal_m.length; ++i) {
            // Check if month equals to clicked date.
            if (+cal_m[i]['data-month'] === sel_m) {
                scroll(cal_m[i]);
                break;
            }
        }
    }
}

功能目标（e）{
var t=e.target | | e.src元素；
if（t.nodeType==3）
t=t.parentNode；
返回t；
}
功能滚动日历（e）{
功能滚动条（e）{
e、 parentElement.scrollTop=e.offsetTop-5；
}
e=e | | window.event；
var t=目标（e），
日期=t['data-date']，
卡尔，卡尔，塞尔，我；
若有（日期）{
//日历容器
cal=document.getElementById（“日历”）；
//每个月一个div。
cal_m=cal.getElementsByTagName（'DIV'）；
//周视图中的日期
日期=日期。拆分（'.'）；
sel_m=+日期[1]；
对于（i=0；i

您的url中有一个参数“wk”，您可以用它来确定您所在的周数，并相应地计算月数，然后您可以在日历表上应用一个偏移顶部以相应地滚动到您的月份，希望这对您有意义。@Pieter您可以使用jQuery，基于jQuery的解决方案可以接受吗？第一段不清楚，您建议的代码是一种糟糕的方法：有一些方法可以根据每个日历元素的位置自动计算适当的滚动位置，而试图对这些值进行硬编码将在任何选择稍微显示它的浏览器中产生不良结果differently@JonathanHobbs谢谢你，兄弟，我会记住这一点的，我就是这么做的，所以就分享吧，仅此而已

function target(e) {
    var t = e.target || e.srcElement;
    if (t.nodeType === 3) 
        t = t.parentNode;
    return t;
}
function scrollCalendar(e) {
    function scroll(e) {
        e.parentElement.scrollTop = e.offsetTop - 5;
    }
    e = e || window.event;
    var t = target(e), 
        date = t['data-date'], 
        cal, cal_m, sel_m, i;
    if (date) {
        // Calendar container
        cal   = document.getElementById('calendar');
        // One div for each month.
        cal_m = cal.getElementsByTagName('DIV');
        // Date from week-view 
        date  = date.split('.');
        sel_m = +date[1];
        for (i = 0; i < cal_m.length; ++i) {
            // Check if month equals to clicked date.
            if (+cal_m[i]['data-month'] === sel_m) {
                scroll(cal_m[i]);
                break;
            }
        }
    }
}