zoukankan      html  css  js  c++  java
  • 緢点连接

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    height: 800px;
    400px;
    border: 2px solid black;
    }
    /*h2 {
    position: fixed;
    margin:50px 500px;
    }*/
    h2{
    margin-top:50px;
    }
    </style>
    </head>
    <body>
    <h2>
    <a href="#div1">to div1</a>
    <a href="#div2">to div2</a>
    <a href="#div3">to div3</a>
    </h2>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    </body>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript">
    /*第四种方法是用js的srollIntoView方法,直接用:
    document.getElementById("divId").scrollIntoView();
      这种方法的好处,是URL不会变,同时能够响应相应的scroll事件,不需要算法什么的。*/
    <br>
    $(document).ready(function() {
    $("#div1Link").click(function() {
    $("html, body").animate({
    scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
    return false;
    });
    $("#div2Link").click(function() {
    $("html, body").animate({
    scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
    return false;
    });
    $("#div3Link").click(function() {
    $("html, body").animate({
    scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
    return false;
    });
    });
    1
    </script>
    </html>

  • 相关阅读:
    知识积累
    来西安对吗
    python循环语句---------while、for
    postman接口功能测试
    Laravel环境搭建
    Vue
    搭建Vue.js环境
    Atom
    PHP
    thinkphp-无限分类下根据任意部门获取顶级部门ID
  • 原文地址:https://www.cnblogs.com/yingxi0/p/8110306.html
Copyright © 2011-2022 走看看