0 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view  contentType="text/html">
        <h:head>

            <f:facet name="first">
                <h:outputScript library="primefaces" name="jquery/jquery.js"/>
                <h:outputScript target="head">
                    $ = jQuery;
                </h:outputScript>
            </f:facet>
            <script type="text/javascript">
                function scrollToTop() {
                    $('html, body').animate({scrollTop: 0}, 'slow');
                }
            </script>

        </h:head>

        <h:body id="body">
            <h:form id="form"> 

                <p:layout id="layout" fullPage="true">
                    <p:layoutUnit id="mid" position="center" style="background: #125790; ">
                        <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>
                        <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>
                        <a href="javascript:scrollToTop()">Scroll to top</a>
                    </p:layoutUnit>
                </p:layout>
            </h:form>
        </h:body>
    </f:view>
</html>

滚动顶部不起作用。问题是什么？

4

1 回答 1

2

那是因为滚动的不是 html 或 body，而是 .html 内容的 HTML 表示<p:layoutUnit position="center">。选择$("html,body")器没有涵盖这一点，因此它似乎没有做任何事情。如果您熟悉基本的 HTML 和 CSS，并仔细查看生成的 HTML 输出，那么您就会理解它。

正确的选择器是：

$(".ui-layout-center .ui-layout-unit-content").animate({scrollTop: 0}, "slow");

与具体问题无关，您声明脚本的方式不必要地笨拙。应该这样做：

<h:head>
    <h:outputScript library="primefaces" name="jquery/jquery.js" />
    <h:outputScript>
        function scrollToTop() {
            $(".ui-layout-center .ui-layout-unit-content").animate({scrollTop: 0}, "slow");
        }
    </h:outputScript>
</h:head>

更好的是，将该函数放在它自己的 JS 文件中：

<h:head>
    <h:outputScript library="primefaces" name="jquery/jquery.js" />
    <h:outputScript name="functions.js" />
</h:head>

此外，javascript:伪协议的使用在href这里是突兀和不鼓励的。您应该将真正的 href 放入href并使用onclick以不显眼地增强它。

<p:layoutUnit position="center">
    <div id="top" />
    ...
    <a href="#top" onclick="scrollToTop(); return false;">Scroll to top</a>
</p:layoutUnit>

更好的是，在 onload 期间添加 click 事件处理程序，这样您的 HTML 就没有硬编码的on*属性。

这一切也表明对基本 JS 的理解不够深入。我建议与基本的 HTML 和 CSS 一起学习。最终，如果您更好地理解 HTML/CSS/JS，您将自动更好地理解 JSF（它在这个问题的上下文中，即仅仅是一个 HTML/CSS/JS 代码生成器）。

于 2013-09-10T11:40:17.753 回答