Question

    <!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>

ScrollTop无效。有什么问题？

Answer 1

那是因为它不是滚动的html或正文，而是<p:layoutUnit position="center">内容的HTML表示。 $("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代码生成器）。

Primefaces js在p：layout中不起作用

1 个答案: