Question

我在Laravel有一个网站。我正在尝试修改按钮，以便在加载后向下滚动到结果部分。我把它添加到按钮

<button class="btn btn-primary btn-block" type="submit" onClick="document.getElementById('acco').scrollIntoView();">Book now</button>

但问题是它转到正确的div，然后结果加载并且它现在滚动回到＆＃34;本书＆＃34;部分。 Here is the website if needed.

感谢您的帮助

Answer 1

您当前页面未使用ajax请求加载结果。因此整个页面被重定向到目标（自动重定向），并在刷新页面时滚动向上。这种结构最简单的解决方案是设置指向所需元素的表单目标，因此在重定向之后，滚动跳转到目标锚点：

<form action="?#acco">

专业解决方案是使用ajax调用加载结果，而不重定向到新地址。这是Ajax调用的简单结构。有关详细信息，请阅读Jquery ajax method：

<button onClick="loadResults()">Book now</button>

<script>
function loadResults(){
   var chekin=$("input[name:'checkin']).val();
   var checkout=$("input[name:'checkout']).val();
   $.ajax({
        url: "resultGenerator.php", //THE URL OF PAGE THAT RETURNS THE RESULTS IN PURE HTML FORMAT
        data: {"checkin":checkout,"checkout":checkout},
        success: function(result){
                 $("#acco").html(result);
                 document.getElementById('acco').scrollIntoView();
                }
    })
}
</script>

通过按下按钮加载结果后滚动到结果

1 个答案: