如何使用JS跳轉到頁面中的特定位置？嘗試scrollIntoView，無法正常工作

我有一個PHP表單進行討論。每條消息都有自己的響應按鈕，這是動態生成的。我在按鈕中使用了javascript來在頁面底部顯示響應表單，但我不能讓頁面在顯示後跳轉到表單。對於有很多討論的網頁來說，這是一個問題，因爲有些用戶可能不知道向下滾動，只會認爲按鈕不起作用。如何使用JS跳轉到頁面中的特定位置？嘗試scrollIntoView，無法正常工作

這是我現在有我的按鈕的代碼：

<a href="#" onClick="changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>

的changeVisibility功能如下：

function changeVisibility(parentID, elementID) { 
    document.getElementById(elementID).style.visibility="visible"; 
    document.forms[0].parent_id.value=parentID; 
    var el = document.getElementById(elementID); 
    el.scrollIntoView(true); 
}

在我的形式，我有一個div，其ID設置爲responseForm。單擊按鈕時，div變得可見，但scrollIntoView不起作用 - 我必須手動向下滾動才能看到它。有任何想法嗎？

來源

2010-05-14 EmmyS

好吧，我終於找到了s有用的東西。我一直在做我被教導在石器時代的事：用什麼需要的JavaScript調用時是一個鏈接，使用

a href="#" onClick="yourFunction()"

顯然，它是一個的殺的事情對我來說＃;如果我只是用

a href="javascript:yourFunction()"

它工作正常。這可能會或可能不會被認爲是良好的做法，但它的工作。

來源

2010-05-16 20:41:09 EmmyS

使用window.location.hash

function changeVisibility(parentID, elementID) { 
    document.getElementById(elementID).style.visibility="visible"; 
    document.forms[0].parent_id.value=parentID; 
    window.location.hash = '#' + elementID; 
    return false; 
} 

<a href="#" onClick="return changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>

編輯：我認爲這個問題是，你沒有返回false，那麼默認的動作（將＃）仍然發生了。

來源

2010-05-14 21:13:49

沒有，仍然做我原來的代碼做的同樣的事情 - 類閃爍的瞬間，然後回到原來的消息顯示。我已經在Firefox 3.6.3，Chrome和IE8中進行了測試。 – EmmyS 2010-05-14 22:45:47

用戶window.location.hash重定向到一個ID /錨點。例如。

HTML：

<p id="youranchor">bla bla</p>

的JavaScript：

window.location.hash='youranchor';

艾美獎 - 此代碼工作。這裏有一個完整的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
    <head> 
    <title>Some title</title> 

    <script type="text/javascript"> 
     function jumpToParagraph() { 
     window.location.hash='paragraphjump'; 
     } 
    </script> 
    </head> 
    <body> 
    <p onclick='jumpToParagraph();'>Jump to the paragraph at the end! [version 1]</p> 

    <p><a href="javascript:jumpToParagraph();">Jump to the paragraph at the end! [version 2]</a></p> 

    <p style="height: 1500px;">Some nonsense</p> 

    <p id="paragraphjump">You made the jump</p> 
    </body> 
</html>

把它放到一個文件中，並在瀏覽器中測試該文件。

來源

2010-05-14 21:16:39

與上面第一個答案中列出的代碼相同;沒有做任何事情。 – EmmyS 2010-05-14 22:48:18

好的，只是再試一次，這裏有什麼奇怪的（或者可能不是;自從我使用CSS和javascript以來，它就一直存在）：如果我將onClick事件放在段落標記中，它可以正常工作。如果我嘗試將它放入一個href標記中（如在href =「＃」onClick ='jumpToParagraph（）'中，它不起作用。將它放入除href之外的任何標記內的問題是，除非使用href，瀏覽器不會將光標改變爲一隻手，所以很多人會認爲你應該點擊的東西是不可點擊的，即使它應該是這樣。關於如何使它在一個內部工作的任何想法href標籤？ – EmmyS 2010-05-16 20:36:24

不起作用的原因是，通過點擊，瀏覽器使用href中的'＃'作爲錨鏈接......並且它會導致如果你想讓它工作的話，你必須使用javascript：在href中（見我上面編輯的版本） – 2010-05-17 19:32:52

嗯，你可以嘗試使用document.body.scrollTop = document.getElementById(elementId).offsetTop;（未測試）

來源

2010-05-14 21:17:41 dhh

不，看起來沒有做任何事情。沒有錯誤我已經在Firefox 3.6.3，Chrome和IE8上測試過 – EmmyS 2010-05-14 22:47:33

坎，下面的JavaScript代碼就像一個魅力：

<script type="text/javascript"> 
function scrollToPos() { 
    var el = document.getElementById("abc"); 
    el.style.visibility = "visible"; 
    el.style.display = "block"; 
    el.scrollIntoView(true); 
} 
</script>

當點擊該鏈接<a href="#" onclick="scrollToPos();return false;">scroll</a><br /> 以下DIV得到的得到可見光和滾動（在IE6，IE8，FF3.6.3，谷歌瀏覽器4.1和Opera 10.5，所有在Windows上測試）

<div id="abc" style="height:100px;color:red;font-weight:bold;visibility:hidden;display:none;"> 
    abc 
</div>

來源

2010-05-15 13:36:39 dhh

那個也不行，顯然有些奇怪的事情發生了，但我已經複製過了你的代碼直接（與我做了所有其他答案一樣），甚至將我的div重命名爲與您匹配以防萬一。它仍然只是短暫閃爍並取消隱藏表格，但不會跳到它。奇怪的是，螢火蟲不給我任何錯誤;它只是沒有做你認爲應該做的事情。 – EmmyS 2010-05-16 20:25:53

如何使用JS跳轉到頁面中的特定位置？嘗試scrollIntoView，無法正常工作

回答

相關問題