首页 \ 问答 \ 定位到相同页面部分的锚点移动得太低(Anchor tag to same page section moves too low)

定位到相同页面部分的锚点移动得太低(Anchor tag to same page section moves too low)

 我想要使用锚标记从主页的顶部移动到主页的较低部分。 主页的下半部分是一个div，就像另一个页面一样，只是它在同一页面上更低。 它被称为find-vegan-products-page，并有一个表单。 该表单的margin-top为100px，因此它不在find-vegan-products-page表单的顶部。 我希望锚点将用户带到find-vegan-products-page的顶部，显示100px的边距（因此表单不在页面的顶部。但它会转到表单的顶部。我认为这是因为表单上面没有任何内容可以导致100px的上边距向下推送表单。这是我的意思的照片：  
   
   
 这是我的代码：  
 HTML：  
<body>
    <div style="margin-bottom: 100px;" class="full_size dimmed">
        <div style="position:fixed; z-index: -1;">
        <video style="position:fixed;" autoplay loop poster="assets/images/home_page/polina.jpg" id="bgvid">
            <!--<source src="polina.webm" type="video/webm">-->
            <source src="assets/videos/polina.mp4" type="video/mp4">
        </video>
        </div>

        <div class="header dim">
            <a href="http://www.w3schools.com" ><h5 id="app-name" class="nav-item clickable white-text medium-text left-text">THE VEGAN REPOSITORY</h5></a>
            <a href="http://www.w3schools.com" ><h5 (click)="clicked()" id="sign-in-button" class="nav-item clickable brand-colour-text medium-text right-text with-border">SIGN UP FREE</h5></a>
            <a href="http://www.w3schools.com" ><h5 class="nav-item clickable white-text medium-text right-text">LOGIN</h5></a>
            <a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >BLOG</h5></a>
            <a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >ABOUT</h5></a>

        </div>

        <div id="motto-text" class="vertical-center">
            <h5 class="white-text medium-text">THE VEGAN REPOSITORY</h5>
            <h1 id="main-text" class=" text-center white-text light-text extra-large-text">FIND VEGAN PRODUCTS NEAR YOU</h1>
            <a id="try-now-button" class="with-border clickable" href="#find-vegan-products-page" ><h5  class=" text-center medium-text">TRY NOW</h5></a>
        </div>
    </div>

    <!-- <div id="googleMap" style="height:500px;"></div> -->

    <div id="find-vegan-products-page" style="height:900px;">
        <div class="form-background">



            <form role="form" style="padding: 40px;">
                <div class="form-group">
                    <input type="text" class="form-control input-control" placeholder="Country">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="City">
                </div>
                <div class="checkbox">
                    <label><input type="checkbox"> Remember me</label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>

</body>
 
 CSS：  
.input-control {
    height: 5rem;
    width: 49%;
    display: inline-flex;
    background-color: transparent;
    border: none;
}

.form-background {
    background: rgba(149, 246, 102, .5);
    margin: 100px 100px 0px 100px;
}
 
 如何获取锚点以移动页面，以便表单顶部和屏幕顶部之间有100px的间隔？ 

I want to use an anchor tag to move from the top of the home page to a lower part of the home page. The lower part of the home page is a div, that is like another page, only it's lower down on the same page. It is called find-vegan-products-page, and has a form on it. The form has a margin-top of 100px, so that it is not at the very top of the form find-vegan-products-page. I want the anchor to take the user to the top of the find-vegan-products-page, displaying the 100px margin (so the form is not at the very top of the page. But it goes instead to the top of the form. I think this is because the form has nothing above it to cause the 100px top-margin to push the form down. Here are photos of what I mean: 
 
 
Here's my code: 
html: 
<body>
    <div style="margin-bottom: 100px;" class="full_size dimmed">
        <div style="position:fixed; z-index: -1;">
        <video style="position:fixed;" autoplay loop poster="assets/images/home_page/polina.jpg" id="bgvid">
            <!--<source src="polina.webm" type="video/webm">-->
            <source src="assets/videos/polina.mp4" type="video/mp4">
        </video>
        </div>

        <div class="header dim">
            <a href="http://www.w3schools.com" ><h5 id="app-name" class="nav-item clickable white-text medium-text left-text">THE VEGAN REPOSITORY</h5></a>
            <a href="http://www.w3schools.com" ><h5 (click)="clicked()" id="sign-in-button" class="nav-item clickable brand-colour-text medium-text right-text with-border">SIGN UP FREE</h5></a>
            <a href="http://www.w3schools.com" ><h5 class="nav-item clickable white-text medium-text right-text">LOGIN</h5></a>
            <a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >BLOG</h5></a>
            <a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >ABOUT</h5></a>

        </div>

        <div id="motto-text" class="vertical-center">
            <h5 class="white-text medium-text">THE VEGAN REPOSITORY</h5>
            <h1 id="main-text" class=" text-center white-text light-text extra-large-text">FIND VEGAN PRODUCTS NEAR YOU</h1>
            <a id="try-now-button" class="with-border clickable" href="#find-vegan-products-page" ><h5  class=" text-center medium-text">TRY NOW</h5></a>
        </div>
    </div>

    <!-- <div id="googleMap" style="height:500px;"></div> -->

    <div id="find-vegan-products-page" style="height:900px;">
        <div class="form-background">



            <form role="form" style="padding: 40px;">
                <div class="form-group">
                    <input type="text" class="form-control input-control" placeholder="Country">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="City">
                </div>
                <div class="checkbox">
                    <label><input type="checkbox"> Remember me</label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>

</body>
 
CSS: 
.input-control {
    height: 5rem;
    width: 49%;
    display: inline-flex;
    background-color: transparent;
    border: none;
}

.form-background {
    background: rgba(149, 246, 102, .5);
    margin: 100px 100px 0px 100px;
}
 
How do I get the anchor to move the page so that there is a 100px gap between the top of the form and the top of the screen?

原文：https://stackoverflow.com/questions/35053141

更新时间：2023-12-09 21:12

最满意答案

 通过使用ip套接字作为“代理”，Socat可用于创建网络串行端口。 这是可以用于我们要创建的每个端口的命令：  
 sudo socat ip:localhost:222 pty,raw,echo=0 

Socat can be used for creating a network o serial port by using a ip socket as a "broker". This is the command that can be used for each port that we want to create: 
sudo socat ip:localhost:222 pty,raw,echo=0

定位到相同页面部分的锚点移动得太低(Anchor tag to same page section moves too low)

最满意答案

相关问答

无法使用socat写入打开QSerialPort(Can not write to open QSerialPort using socat)[2023-06-17]

使用INTERFACE选项在SOCAT上进行PPPd(PPPd over SOCAT using INTERFACE option)[2022-08-04]

Socat Raspberry Pi串行到TCP / IP问题(Socat Raspberry Pi serial to TCP/IP Problems)[2023-06-05]

socat：使用串口记录对话(socat: log conversation with serial port)[2023-12-12]

通过网络桥接串行端口(Bridge Serial-Ports over network)[2022-09-08]

在Linux中使用SOCAT时串行端口不工作(Serial port not working when using SOCAT in linux)[2023-10-19]

使用socat在Mac上的USB串行端口(USB Serial Port on Mac using socat)[2021-11-13]

在Vagrant和VirtualBox环境中使用`socat`进行多播(Multicasting with `socat` in Vagrant & VirtualBox Env)[2023-08-19]

Socat - 虚拟串行网络(Socat - Virtual serial network)[2022-03-26]

ORSSerialPort中的虚拟串行端口(Virtual serial ports in ORSSerialPort)[2022-04-07]

相关文章

最新问答