Question

我正在尝试从Url捕获Id之后导航到基于它的div。

当用户导航到此页面时，网址就像下面第一次

http://localhost:6447/products/all-products#productId2

这是＃productId2是我需要在页面加载时滚动的页面中的div id

我在listview中使用分页

显示产品

<ItemTemplate>
                <tr>
                    <td>
                        <div id='#productId<%#Eval("PId")%>'>
                            <a class="ProdcutText">
                                <%#Eval("PName")%></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="PriceText">
                            -<a class="PPrice"><%#Eval("Price")%></a></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="PDesc">
                            <asp:Label ID="lblDesc" runat="server" Text='<%#Eval("PrdocutDescription")%>'> </asp:Label>
                        </div>
                    </td>
                </tr>
            </ItemTemplate>

在内容页面中，我尝试过以下但似乎无法正常工作。

<asp:Content ID="HeadContent" ContentPlaceHolderID="MasterHeadContentHolder" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('html,body').animate({
            scrollTop: $("#productId6").offset().top
        }, 2000);
    });
</script>

有什么问题？并且在分页后，url更改为，并且我得到undefined和null错误的错误。

http://localhost:6447/products/all-products?list=1

Answer 1

显然你的 html应该生成，如下所示：

<div id="productId2">
   Proiduct details
</div>

Answer 2

试试这个Javascript代码：

    var $target = $( location.hash);
    var pos = Math.max( 0, $target.offset().top);
    var $view = browser.indexOf('WebKit') < 0 ? $('html') : $(document.body);
    $view.animate({'scrollTop': pos});

第一行从URL获取productId，如＃productId2 然后它找到具有该id的元素，＃是ID的jQuery选择器。第二行计算该元素在页面下的位置（滚动量）。第三行决定要滚动的内容，HTML（适用于Chrome和Safari）或BODY。最后一行是平滑滚动。

Answer 3

当您将文件名设为test.html时请尝试以下代码，然后输入网址 test.html＃div1它将滚动到div 1 test.html＃div2它将滚动到div 2

<html>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>


<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="div1">div</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="div2">Div start</div>
</body>
</html>

使用jquery滚动到div Id上的某个位置？

3 个答案: