单击jQuery时向左水平滚动+ 50px

Question

我正在尝试使用jQuery来使左箭头和右箭头在单击时左右滚动+50px，但它似乎只是将页面重置为向左滚动0。

这是我的HTML：

<div id="parallax">
    <a href="#" id="test"></a>
</div>

这是我的脚本：

$(document).ready(function(){
    $("#test").click(function(){
        $("#parallax").scrollLeft(5000);
    });
});

任何帮助或见解都将不胜感激。

Answer 1

您需要阻止<a>元素的默认操作，因为href="#"将始终滚动到顶部：

$(document).ready(function(){
    $("#test").click(function(e){
        e.preventDefault();
        $('body').scrollLeft(5000);
    });
});​

Answer 2

正如我所承诺的，这是我写的演示。这是一个粗略的草稿，可能需要一些清理。我还删除了一些与公司相关的东西，可能有一两个样式引用了它们，但除此之外，它应该可以做你想做的事情。

注意:这个演示是为Chrome设计的(样式包括只有chrome属性的CSS3效果-我写得很快，并不是为了兼容-请随意更改和删除/添加任何必要的样式，以使其与其他浏览器兼容)

   Text Slider Demo              body {             background-color: rgb(252,252,252);         }

    .demo {
        font-size: 16px;
        border: 2px solid rgb(200,200,200);
        display: inline-block;
        padding: 15px;
        border-radius: 10px;
        margin: 0px 0px 20px 30px;
    }

    .demo-inner-wrapper {
        width: 200px;
        overflow: hidden;
        border-radius: 5px;
    }

    .demo-outer-wrapper {
        border: 2px solid rgb(200,200,200);
        border-radius: 5px;
        padding: 4px;
        width: 200px;
        overflow: hidden;
        margin: 4px;
    }

    .demo-entry-title {
        white-space: nowrap;
    }

    .arrow {
        display: inline-block;
        margin: 4px;
        border-radius: 5px;
        border: 2px solid rgb(55,190,235);
        background-color: rgb(240,240,240);
        padding: 4px;
        width: 40px;
        text-align: center;
        color: rgb(30,180,230);
        font-weight: bold;
        cursor: pointer;
    }

    .demo-hover {
        background-color: rgb(0,35,100);
        color: rgb(252,252,252);
    }

    .content {
        padding: 8px;
        width: 640px;
        border: 2px solid rgb(200,200,200);
        border-radius: 10px;
    }

    .demo-information {
        font: 16px arial, helvetica, sans-serif;
    }

    .header {
        font-size: 24px;
        font-weight: bold;
        color: rgb(0,35,100);
    }

    .section-header {
        color: rgb(25,100,190);
        font-size: 18px;
        font-weight: bold;
        margin-left: 4px;
    }

    .demo-information p {
        margin-left: 4px;
    }

    .demo-header {
        font: 18px arial, helvetica, sans-serif;
        font-weight: bold;
        color: rgb(0,35,100);
    }  

    .demo-content {
        margin-left: 8px;
        margin-top: 8px;   
    }      
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var $left = $(".left-arrow");
        var $right = $(".right-arrow");
        var $et = $(".demo-entry-title");
        var $demoWrap = $(".demo-inner-wrapper");

        $left.mouseenter(function () {
            $(this).addClass("demo-hover");
            var width = $et.width();
            var marginStr = $et.css("margin-left");
            var margin = parseInt(marginStr.substring(0, marginStr.length - 2));
            console.log(margin, marginStr);
            var scrollTo = $demoWrap.width() - width;
            if (scrollTo < 0) {
                $et.animate({ "margin-left": scrollTo }, (margin - scrollTo) * 10);
                console.log(width, margin, scrollTo, (margin - scrollTo) * 10);
            }
        }).mouseleave(function () {
            $et.stop();
            $(this).removeClass("demo-hover");
        });

        $right.mouseenter(function () {
            $(this).addClass("demo-hover");
            var width = $et.width();
            var marginStr = $et.css("margin-left");
            var margin = parseInt(marginStr.substring(0, marginStr.length - 2));
            console.log(margin, marginStr);
            var scrollTo = $demoWrap.width() - width;
            if (scrollTo < 0) {
                $et.animate({ "margin-left": 0 }, -margin * 10);
                console.log(width, margin, scrollTo, -margin * 10);
            }
        }).mouseleave(function () {
            $et.stop();
            $(this).removeClass("demo-hover");
        });
    });
</script>
</head>
<body>
    <div class="content">
        <div class="demo-information">
            <div class="header">
                Text Slide Demo</div>
            <br />
            <div class="section-header">
                Overview</div>
            <p>
                The demo below is intended to illustrate the use of jQuery and CSS to create a slide
                effect text that is too long for its specified width, rather than wrapping the text
                onto multiple lines. The scripting involved is very light weight, and can easily
                be wrapped up into a jQuery plugin.
            </p>
        </div>
        <br />
        <div class="demo">
            <div class="demo-header">
                Demo:</div>
            <div class="demo-content">
                <div class="demo-outer-wrapper">
                    <div class="demo-inner-wrapper">
                        <span class="demo-entry-title">This is an entry title that is too long for the section,
                            and here is me giving it even more length.</span>
                    </div>
                </div>
                <div class="demo-buttons">
                    <span class="arrow left-arrow">Left</span><span class="arrow right-arrow">Right</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

对于格式化问题，我很抱歉。我只是修复了它:)

Answer 3

请找到下面的链接。我希望这将有助于解决这个问题。

$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});

解决方案: Jsfiddle Link