Question

我有一个导航菜单，上面有一些div。

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}

    a:hover {
        background-color: fuchsia;
    }

li {
    display: inline;
}

<div id="divHeader">
        <img src="https://www.google.co.in//images/srpr/logo11w.png" width="150px" />
    </div>
    <div id="Menu">
        <ul>
            <li><a href="#">Link Div 1</a></li>
            <li><a href="#">Link Div 2</a></li>
            <li><a href="#">Link Div 3</a></li>
            <li><a href="#">Link Div 4</a></li>
        </ul>
    </div>
 <hr />
 <hr />
    <div id="content">
        <div id="Div1">
          <img src="http://www.clinks.com.br/wp-content/uploads/2013/09/anunciar-produtos-jovens-800x380.jpg">
        </div>
        <div id="Div2">
  <img src="http://kitcheninterior.pics/wp-content/uploads/2015/02/GeoMATRIX-FlyAsh-Glass-Concrete-Countertops--800x380.jpg">
        </div>
        <div id="Div3">
          <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/94/7b/d1947bc25106297b762b3806233534bc.jpg">
        </div>
        <div id="Div4"><img src="http://www.clinks.com.br/wp-content/uploads/2014/02/caracteres-especiais-links-patrocinados-800x380.jpg">
        </div></div>

我想通过导航点击滚动div而不更改导航链接位置，div滚动位置应该在导航菜单上方。请提前帮助创建此感谢

Answer 1

您现在习惯了这个Jquery代码，并且导航中的一些更改就像这样

$(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;
	    });
	});
    
    
    var oritop = -100;
   $(window).scroll(function() {
    var scrollt = $(this).scrollTop();
    var elm = $(".scrollTopWindow");
    if(oritop < 0) {
        oritop= elm.offset().top;
    }
    if(scrollt >= oritop) {
        elm.css({"position": "fixed", "top": 0, "left": 0});
    }
    else {
        elm.css("position", "static");
    }


});
    
});

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}

    a:hover {
        background-color: fuchsia;
    }

li {
    display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="divHeader">
        <img src="https://www.google.co.in//images/srpr/logo11w.png" width="150px" />
    </div>
    <div id="Menu" class="scrollTopWindow">
        <ul>
            <li><a href="#Div1">Link Div 1</a></li>
            <li><a href="#Div2">Link Div 2</a></li>
            <li><a href="#Div3">Link Div 3</a></li>
            <li><a href="#Div4">Link Div 4</a></li>
        </ul>
    </div>
 <hr />
 <hr />
    <div id="content">
        <div id="Div1">
          <img src="http://www.clinks.com.br/wp-content/uploads/2013/09/anunciar-produtos-jovens-800x380.jpg">
        </div>
        <div id="Div2">
  <img src="http://kitcheninterior.pics/wp-content/uploads/2015/02/GeoMATRIX-FlyAsh-Glass-Concrete-Countertops--800x380.jpg">
        </div>
        <div id="Div3">
          <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/94/7b/d1947bc25106297b762b3806233534bc.jpg">
        </div>
        <div id="Div4"><img src="http://www.clinks.com.br/wp-content/uploads/2014/02/caracteres-especiais-links-patrocinados-800x380.jpg">
        </div></div>

Answer 2

我认为你期待这个解决方案......

使用overflow: auto CSS媒体资源，使div可滚动，并将其定位为absolute及其父div为relative。

代码段：

＆＃13;

ul {
            float: left;
            width: 100%;
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        a {
            float: left;
            width: 6em;
            text-decoration: none;
            color: white;
            background-color: purple;
            padding: 0.2em 0.6em;
            border-right: 1px solid white;
        }

            a:hover {
                background-color: fuchsia;
            }

        li {
            display: inline;
        }
        html, body {
            height: 100%;
        }
        #wrapper:before {
            content: '';
            float: left;
            height: 100%;
        }
        #wrapper {
            height: 100%;
        }
        #content {
            position:relative;
        }
        #content:after {
            content: '';
            display: block;
            clear: both;
        }
        #scrollContent {
            position: absolute;
            height: 100%;
            width: 100%;
            overflow: auto;
        }

＆＃13;

<div id="wrapper">
            <div id="divHeader">
                <img src="https://www.google.co.in//images/srpr/logo11w.png" width="150px" />
            </div>
            <div id="Menu">
                <ul>
                    <li><a href="#">Link Div 1</a></li>
                    <li><a href="#">Link Div 2</a></li>
                    <li><a href="#">Link Div 3</a></li>
                    <li><a href="#">Link Div 4</a></li>
                </ul>
            </div>
            <hr />
            <hr />
        <div id="content">
            <div id="scrollContent">
                <div id="Div1">
                    <img src="http://www.clinks.com.br/wp-content/uploads/2013/09/anunciar-produtos-jovens-800x380.jpg">
                </div>
                <div id="Div2">
                    <img src="http://kitcheninterior.pics/wp-content/uploads/2015/02/GeoMATRIX-FlyAsh-Glass-Concrete-Countertops--800x380.jpg">
                </div>
                <div id="Div3">
                    <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/94/7b/d1947bc25106297b762b3806233534bc.jpg">
                </div>
                <div id="Div4">
                    <img src="http://www.clinks.com.br/wp-content/uploads/2014/02/caracteres-especiais-links-patrocinados-800x380.jpg">
                </div>
            </div>
        </div>
    </div>

＆＃13;

希望这可以帮助你!!!

使用固定导航菜单单击动画滚动Div

2 个答案: