Question

我有HTML代码以及与PHP Laravel集成在一起的表。我正在从Admin.php到HTML获取数据。因此，该表是由后端代码来的，并且比屏幕窗口宽。我添加了一个水平滚动条来移动它。我在后端添加了一个链接，以在<th>与哈希href之间移动。问题是当我单击链接时，通过水平滚动和垂直滚动将其移至特定的<th>。

Admin.php中的锚标记：

$orderIdColumn .= '<br><a href="#d_' . $delivery->id . '" class="intro">Read notes ></a>';

我在HTML中添加了一个jQuery，以防止垂直滚动：

$(document).ready(function()
{
    $('.intro').bind('click',function(event)
    {
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 100);

        event.preventDefault();
    });
});

即使包含了此链接，链接仍会垂直滚动。但是，在HTML中添加静态链接并将其与上述功能绑定后，它便可以正常工作了。我想问题是链接来自后端，但不确定。我该怎么解决？

这是我最想做的演示。这段代码在没有任何垂直滚动的情况下运行良好。我不明白为什么这在我的项目中不起作用。

http://jsfiddle.net/34r76ag8/21/

Answer 1

尝试使用chrome开发工具进行检查，以验证从后端收到的信息是否正确。

您可以执行以下操作：ctrl + shift + c（打开检查器）

Answer 2

只需在HTML文件中创建一个函数，然后使用onclick在php页面的元素中调用它即可。

function scroll(){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, 100);

    event.preventDefault();
}

在php文件中

$orderIdColumn .= '<br><a href="#d_' . $delivery->id . ' onclick="scroll()" " class="intro">Read notes </a>';

仅水平滚动不起作用

2 个答案: