Question

这基本上是我目前的网站：

现在我在#About部分遇到了问题，当我点击它右转到#right部分，你不能在小提琴中看到它，但在我的网页中过渡非常顺利，我喜欢它是怎么回事，但我只是不知道如何使其适用于左侧，因为它位于左侧：-100％。

$(function() {
    $('#About a').bind('click',function(event){
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1000);
        event.preventDefault();
    });
});

我知道fullPage.js插件，但我想拥有自己的解决方案和网页布局，甚至认为fullPage可能要好得多。

如果你能帮助我，我将不胜感激

修改

小提琴纠正：https://jsfiddle.net/s0wgnvk2/1/

Answer 1

scrollLeft表示左侧的滚动条位置，请参阅ref here。所以它不能是负数（最左边的位置是0）。

您需要的是marginLeft，请尝试：

$('html, body').animate({ marginLeft: '100%' });

这是一个有效的jsfiddle example。请注意，我已经设置了标题位置：fix，以便它知道锚点的位置以及当元素的左边距发生变化时如何自我宽度。

Answer 2

使用动画不滚动看看使用滚动https://jsfiddle.net/kevalbhatt18/s0wgnvk2/4/

时遇到的问题

正如你在网站上所说，动画工作顺利而不是小提琴那是因为你从droupdown中没有选择jauery 出现在小提琴编辑器的左侧，这样你的动画就不起作用所以如果你看到你的控制台它会在你的例子https://jsfiddle.net/s0wgnvk2/
中给你未捕获的ReferenceError：$未定义

左右动画示例：https://jsfiddle.net/kevalbhatt18/vunL9ec2/

的

的
$('#About a').bind('click', function (event) { var $anchor = $(this); if ($anchor.context.innerHTML === "RIGHT" ) { $($anchor.attr('href')).stop().animate({ left: '-=100%' }, 1000); } else if ($anchor.context.innerHTML === "LEFT") { $($anchor.attr('href')).stop().animate({ left: '+=100%' }, 1000); } else { console.log($(this).context.offsetParent.id ) $('#'+$(this).context.offsetParent.id ).stop().animate({ left: $(this).context.offsetParent.id ==='right'?'+=100%':'-=100%' }, 1000); }

的

从左侧滑入

2 个答案: