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);
    });
});

FIDDLE

Answer 2

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

注意：此演示程序是专为Chrome设计的（样式包括仅具有chrome属性的CSS3效果 - 我写得很快，并没有写出兼容性 - 随意更改和删除/添加任何必要的样式以使其兼容其他浏览器）

文字滑块演示身体 { 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

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

3 个答案: