如何在flask html中向下滚动到页面的一部分？答案

【问题标题】：How to scroll down to a section of a page in flask html?如何在flask html中向下滚动到页面的一部分？
【发布时间】：2020-10-15 14:47:20
【问题描述】：

我的网站是这样的：https://ayusg183.pythonanywhere.com。但我希望它是，如果你按下某个按钮，就像我可以创建一个名为画廊的按钮，当你按下它时，它会向下滚动页面。我可以制作一个按钮，但我不能让按钮向下滚动。我正在使用 html 编码，而不是烧瓶。

【问题讨论】：

标签： html css flask

【解决方案1】：

CSS：

.navbar-link {
display: inline-block;
margin-bottom: 5000px; /* for demo purpose only */
}

HTML：

    <a href="#navbarGallery" class="navbar-link">Go to Gallery</a> /* place this in navbar */

<section id="navbarGallery">
    <div class="container-fluid">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</section>

jQuery:

$(document).ready(function(){
$("a[href='#navbarGallery']").on("click", function (e) {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top /* scroll to the matching id */
        }, 1000); /* here 1000 in ms */
 });
});

【讨论】：