Question

我在一个可分解的div中有一个12个月的日历，因此一次可以看到两个日历月。除此之外是每周计划。

<小时/> ^{点击图片查看大图。}

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

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

Answer 1

这可以像这个算法一样完成。你必须找到要去的月份。

$(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 例如：

1月日历ID为“Jan”
2月日历ID是“2月”

等。

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

Answer 2

Hrmf。不知道你在网站上链接了什么，只是在查看你的问题的编辑时偶然发现了它。还错过了几周仅通过单击顶部菜单进行更改的事实。但是，无论如何，这是一个更新：

鉴于你的标记和链接逻辑+你正在使用jQuery的事实，一个建议是：

为每个日历月添加id。
在DOM就绪，（加载文档），检查URL周/年并计算月份。
按id查找日历。
为div换行日历设置scrollTop。

1。） ID必须是唯一的。在您的标记中，所有月份表都有id="example"。将此更改为例如：

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

2。，3.，4。） 从网址获取日期并进行滚动：

// 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);

其他提示：

在标记和CSS上使用验证服务。这将为您节省很多麻烦。（也许还会介绍一些;）。

旧答案：

您可以将scrollTop与offsetTop结合使用，为月份容器设置滚动。

»» Very crude demo ««

这一切都取决于您的标记以及您实际生成文档的方式。

您可能会为周容器添加一个事件监听器，获取周/日期或者什么，并滚动到相应的月份。

一个应该适应的布局是使用data-*属性，如下所示：

<div id="calendar">
   <div data-month="1">Januar 1, 2, 3, ...</div>
   <div data-month="2">Februar 1, 2, 3, ...</div>
   ...
</div>

这几周：

<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>

滚动一个可以做：

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;
            }
        }
    }
}

Answer 3

用一些算法计算你的身高，这很容易就像（总高度）*（特定周的slNo）/（周数），就像那样，我已经实现了simmilar的东西，这就是我怎么做的，这很方便像我这样的

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

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


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

将Div滚动到特定位置

3 个答案:

旧答案：