Javascript 滚动到溢出div中的特定元素_Javascript_Css_Html

Javascript 滚动到溢出div中的特定元素

javascript css html

Javascript 滚动到溢出div中的特定元素,javascript,css,html,Javascript,Css,Html,我有一个带有溢出的div，它的作用类似于一个列表，因为在所有浏览器中定制并保持这种方式时，真正的select是一件麻烦事问题是，列表是长的，我希望当页面加载列表中所选元素时，或多或少会在div的中间，就像在SELECT.中把SELECT= =选中的选项放到选项中一样。这是一个提前感谢。您可以使用锚：为列表项之一指定特定id示例：锚定当您链接到此页面时，将标签锚添加到url，您的列表将被添加到具有相应id的列表项。示例url:www.yourpage.com/list应变为www.yo

我有一个带有溢出的div，它的作用类似于一个列表，因为在所有浏览器中定制并保持这种方式时，真正的select是一件麻烦事

问题是，列表是长的，我希望当页面加载列表中所选元素时，或多或少会在div的中间，就像在SELECT.

中把SELECT= =选中的选项放到选项中一样。这是一个

提前感谢。

您可以使用锚：

为列表项之一指定特定id示例：锚定当您链接到此页面时，将标签锚添加到url，您的列表将被添加到具有相应id的列表项。示例url:www.yourpage.com/list应变为www.yourpage.com/listanchor

这会告诉你

<li id="anchor"><span>12 years</span> ... </li>

<a href="#anchor">anchor link</a>

您可以使用锚点：

这会告诉你

<li id="anchor"><span>12 years</span> ... </li>

<a href="#anchor">anchor link</a>

如果使用jQuery，可以使select容器滚动到特定元素。在本例中，我向随机li添加了一个.select类，以显示它是如何工作的

然后，您可以在可包装容器上按像素数进行滚动。所选元素与其父元素一致

$(function(){   
    var offsetSelectedElement = $(".selected").position().top;
    $("#wraptable").scrollTop(offsetSelectedElement);
});

编辑：

要添加jQuery simple，请在页面的标题部分添加库：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    ...
 </html>

如果使用jQuery，可以使select容器滚动到特定元素。在本例中，我向随机li添加了一个.select类，以显示它是如何工作的

然后，您可以在可包装容器上按像素数进行滚动。所选元素与其父元素一致

$(function(){   
    var offsetSelectedElement = $(".selected").position().top;
    $("#wraptable").scrollTop(offsetSelectedElement);
});

编辑：

要添加jQuery simple，请在页面的标题部分添加库：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    ...
 </html>

如果你只是想把卷轴移到中间，也许你可以试试这个：

 document.getElementById('wraptable').scrollTop = document.getElementById('wraptable').scrollHeight / 2;

它将可包装的卷轴移到中间

如果你只是想把卷轴移到中间，也许你可以试试这个：

 document.getElementById('wraptable').scrollTop = document.getElementById('wraptable').scrollHeight / 2;

它将可包装的卷轴移到中间

您还可以调用window.location.href='anchor'；这将直接将您带到该特定页面。就像调用锚标记一样。块位于主索引中，我不知道如何始终将/anchor保留在地址栏上，因为它会自动更改？location=。。我尝试了onLoad=window.location.href='anchor'；但它不起作用…：/@user3529213你用锚定了吗？我添加了更多的解释。你也可以调用window.location.href='anchor'；这将直接将您带到该特定页面。就像调用锚标记一样。块位于主索引中，我不知道如何始终将/anchor保留在地址栏上，因为它会自动更改？location=。。我尝试了onLoad=window.location.href='anchor'；但它不起作用…：/@user3529213你用锚定了吗？我补充了一些解释，你是什么意思？在css中的报价中，添加文本align:left；。文本将或多或少在中间的不是一个风格问题。我只是想自动滚动到画面中间你是什么意思？在css中的报价中，添加文本align:left；。文本将或多或少在中间的不是一个风格问题。我只是想自动滚动到中间的div，太棒了。唯一的问题是我不知道如何使用jQuery。我试着在我的base.js中添加这段代码，但有人告诉我这不是一种方法。。。解决方案是完美的：这太棒了。唯一的问题是我不知道如何使用jQuery。我试着在我的base.js中添加这段代码，但有人告诉我这不是一种方法。。。解决方案是完美的：这在索引页面中非常有效。但在控制台的其他页面上，我得到了错误类型error:document.getElementById。。。是null base.js:7。我猜这是因为wraptable在其他任何地方都不存在，脚本会尝试在我去的任何地方运行它。有什么办法吗？其他页面上还有包装纸吗？没有。只有索引上有。我试图将js代码放在一个函数中，该函数是我从div调用的，onload=gotoSelected；但它不起作用。控制台中没有错误，什么都没有…好的。我修好了。我在html中的DIV行之后添加了脚本行，现在它可以在需要的地方和需要的时候加载。document.getElementById'wraptable'.scrollTop=document.getElementById'wraptable'.scrollHeight/2；。谢谢这在索引页面中非常有效。但在控制台的其他页面上，我得到了错误类型error:document.getElementById。。。是null base.js:7。我猜这是因为wraptable在其他任何地方都不存在，脚本会尝试在我去的任何地方运行它。有什么办法吗？其他页面上还有包装纸吗？

不，它只在索引上。我试图将js代码放在一个函数中，该函数是我从div调用的，onload=gotoSelected；但它不起作用。控制台中没有错误，什么都没有…好的。我修好了。我在html中的DIV行之后添加了脚本行，现在它可以在需要的地方和需要的时候加载。document.getElementById'wraptable'.scrollTop=document.getElementById'wraptable'.scrollHeight/2；。谢谢