如何使用javascript变量设置transform属性的值_Javascript_Jquery_Css

如何使用javascript变量设置transform属性的值

javascript jquery css

如何使用javascript变量设置transform属性的值,javascript,jquery,css,Javascript,Jquery,Css,我在这里找到了一个类似的答案，但它对我不起作用。我试图创建一个滚动单页布局，但是使用css3动画而不是jquery动画。我的目标是将变量集作为散列的位置，并将其传递到transformX（）。这是我到目前为止所拥有的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"

我在这里找到了一个类似的答案，但它对我不起作用。我试图创建一个滚动单页布局，但是使用css3动画而不是jquery动画。我的目标是将变量集作为散列的位置，并将其传递到transformX（）。这是我到目前为止所拥有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<section id="wrapper">
    <div class="nav-wrapper">   
        <nav>
            <ul>
                <li class="nav-li"><a href="#intro">home</a></li>
                <li class="nav-li"><a href="#work">work</a></li>
                <li class="nav-li"><a href="#about">about</a></li>
                <li class="nav-li"><a href="#contact">contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="home">
        <div id="intro" class="content">
        </div>
    </div>

    <div class="portfolio">
        <div id="work" class="content">
        </div>
    </div>

    <div id="about" class="about">
    </div>

    <div id='contact' class="connect">

    </div>
    <footer>

    </footer>
</section>


<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
</body></html>

和相关Javascript：

$(".nav-li > a").click(function(event){
         event.preventDefault();
         //calculate destination place
         var dest;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }

         //go to destination
         $('body').css('transform', 'translateY('+ dest +')');
                      //('-webkit-transform', 'translateY('+ dest +')');
                      //('-ms-transform', 'translateY('+ dest +')');
                      //('-moz-transform', 'translateY('+ dest +')');
                      //('-o-transform', 'translateY('+ dest +')');
         console.log(dest)
     });

正如您在console.log（dest）中所看到的那样，我确实得到了“dest”的正确值。这不可能吗？

从更改代码

$（'body'）.css（'transform'，'translateY（'+dest+'））
到
$（'body'）.css（'transform'，'translateY（-'+dest+'px'）
您需要指定翻译单位。-ve符号是将主体向上移动，而不是向下移动，这是您所期望的。您还可以将对象传递到css方法中，这样您就不必为每个浏览器前缀创建新函数。我有一个相同的问题，您的回答很不幸没有帮助。有什么想法吗？
$(".nav-li > a").click(function(event){
         event.preventDefault();
         //calculate destination place
         var dest;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }

         //go to destination
         $('body').css('transform', 'translateY('+ dest +')');
                      //('-webkit-transform', 'translateY('+ dest +')');
                      //('-ms-transform', 'translateY('+ dest +')');
                      //('-moz-transform', 'translateY('+ dest +')');
                      //('-o-transform', 'translateY('+ dest +')');
         console.log(dest)
     });