zoukankan      html  css  js  c++  java
  • JavaScript hash

    location.hash -- 返回URL#后面的内容,如果没有#,返回空

    • hash,中文"哈希"
    • 引用网址:http://www.dreamdu.com/javascript/location.hash/
    • 兼容IE6+浏览器

    hash属性语法

    location.hash;

    hash属性图示

    location对象属性

    hash属性说明

    域名中#号后面的部分通常是指定位置的链接的方式产生的,例如:ASCII编码-控制字符

    上面这个链接会直接定位到http://www.dreamdu.com/xhtml/ascii/文档中id为control_characters的标签处。

    示例

    document.writeln(location.hash);
    

    JavaScript hash 属性示例 -- 可以尝试编辑

    实例:滚动锚点

    <section class="container">
    
    <h2>JQuery Interal Link Animation Scrolling</h2>
    
    <p>Click on the links below to see the scroll to effect.</p>
    
    <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    
    <div id="home">
        <h2>Home</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p>
    </div>
    
    <div id="about">
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p>
    </div>
    
    <div id="services">
        <h2>Services</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p>
    </div>
    
    <div id="portfolio">
        <h2>Portfolio</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p>
    </div>
    
    <div id="contact">
        <h2>Contact</h2>
        <form>
            <p>Name: <input type="text"></p>
    
            <p>Email: <input type="text"></p>
    
            <p>Message: <textarea></textarea></p>
        </form>
    </div>
    
    
    
    <div style="height:800px;background:#f5f5f5;"></div>

    css

    body{
        font-family: 'Droid Sans', serif;
        color:#444;
        font-size:1.2em;
    }
    .container{
        width:900px;
        margin:30px auto;
        padding:25px;
        min-height:400px;
        height:auto;
    }
    .container h2 { margin-top:30px;}
    .nav{margin:0; padding:0;}
    .nav li
    {
        display: inline;
        margin:0 20px;
    }

    JS

    $(document).ready(function(){
        $('a[href^="#"]').on('click',function (e) {
            e.preventDefault();
    
            var target = this.hash,
            $target = $(target);
    
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top
            }, 900, 'swing', function () {
                window.location.hash = target;
            });
        });
    });
  • 相关阅读:
    华为云发送邮件
    activiti act_re_model 分析
    tengine upstream
    zuul压力测试与调优
    idea 快捷键
    kubernetes helm
    编写高质量代码–改善python程序的建议(二)
    编写高质量代码--改善python程序的建议(一)
    总结OpenvSwitch的调试经验
    提高SDN控制器拓扑发现性能
  • 原文地址:https://www.cnblogs.com/leejersey/p/3566577.html
Copyright © 2011-2022 走看看