javascript - 单击图库图像时导航栏会自动滚动

标签 javascript jquery html css

所以我有一个工作正常的图像库，但是每当我单击图库图像时，导航栏就会自动滚动。我不知道为什么会发生这种情况。一旦我检查了元素，我发现 body 会自动获取 class="baguetteBox-open" 类。我认为这可能是一个问题。我该如何解决这个问题。我不知道是否可以同时问两个问题，但另一个问题是:每当我访问该页面时，导航栏都会自动滚动。我该如何解决。

工作示例

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
}

/* h1 {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000000;
    font-size: 48px;
    font-family: "Playfair Display";
    font-weight: lighter;
} */
/* 
body{
    background: #101010;
} */
.toggle-btn {
    position: fixed;
    margin: 1.4em;
    padding: 1em;
    width: 40px;
    height: 12px;
    right: 0;
    z-index: 1;
}

span.one {
    position: absolute;
    width: 40px;
    height: 2px;
    background: rgb(105, 48, 48);
    margin-right: 60px;
}

span.two {
    position: absolute;
    width: 40px;
    height: 2px;
    background: rgb(105, 48, 48);
    margin-top: 12px;
    margin-right: 60px;
}

.menu {
    z-index: 0;
    position: absolute;
    background:#000000;
    height: 100vh;
    width: 100%;
    top: -200%;
}

.data {
    padding: 8em 0 0 2em;
    text-align: left;
}

ul {
    list-style: none;
}

li:first-child {
    color: grey;
    font-family: Poppins;
    font-size: 24px;
}

li:not(:first-child) {
    color: #fff;
    font-size: 42px;
}

a {
    text-decoration: none;
    color: #cccccc;
    font-family: Poppins;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">


	<!-- navigation animation -->

	<link rel="stylesheet" href="{{ url_for('static',  filename='dist/css/nav.css') }}">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>


	<!-- gallery css -->


	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css"/>
	<!-- google fonts -->

	<link href="https://fonts.googleapis.com/css?family=Poppins:300,400|Roboto+Mono:300i,400&display=swap" rel="stylesheet">

	<!-- gsap -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

	<!-- jquery -->

	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

	<!-- parllax javascript -->
	<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>

	<!-- bootstrap CDN -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

	<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/custom.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/sal.js/dist/sal.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/grid-gallery.css') }}">
	<!-- font awesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
	<script src="https://kit.fontawesome.com/a766f28a10.js"></script>
	<title>AW Zone / {{title}}</title>
	<style>
		body {
			font-family: 'Poppins', sans-serif;
			font-family: 'Roboto Mono', monospace;
			margin: 0;
			padding: 0;
			width: 100%;
		}
	</style>
</head>
<body>
	<!-- new navigation is here -->
	<div class="toggle-btn mb-5">
		<span class="one mb-5"></span>
		<span class="two mb-5"></span>
   </div>

   <div class="menu">
		<div class="data">
			 <ul>
				  <li>Navigation</li>
				  <li ><a href="{{ url_for('index') }}" style="color: #ffffff;text-decoration: none;">Home</a></li>
				  <li ><a href="{{ url_for('gallery') }}" style="color: #ffffff;text-decoration: none;">Gallery</a></li>
				  <li><a href="{{ url_for('about') }}" style="color: #ffffff;text-decoration: none;">About</a></li>
				  <li><a href="{{ url_for('contact') }}" style="color: #ffffff;text-decoration: none;">Contact</a></li>
			 </ul>
   </div>
   </div>
   
   
   <section class="gallery-block grid-gallery mt-5">
    <div class="container">
        <div class="heading">
            <h4 id="heading">Wedding</h4>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-4 item">
                <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                    <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                </a>
            </div>
            <div class="col-md-6 col-lg-4 item">
                <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                    <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                </a>
            </div>
            <div class="col-md-6 col-lg-4 item">
                <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                    <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                </a>
            </div>
            <div class="col-md-6 col-lg-4 item">
                <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                    <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                </a>
            </div>
            <div class="col-md-6 col-lg-4 item">
                <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                    <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                </a>
            </div>
            <div class="col-md-6 col-lg-4 item">
                <a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                    <img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
                </a>
            </div>   
        </div>
    </div>
</section>

   
   
   
   
   
   
   <script type="text/javascript">

		var t1 = new TimelineMax({paused: true});
	 
		t1.to(".one", 0.8, {
			 y: 6,
			 rotation: 45,
			 opacity:1,
			 ease: Expo.easeInOut
		});
		t1.to(".two", 0.8, {
			 y: -6,
			 opacity: 1,
			 rotation: -45,
			 ease: Expo.easeInOut,
			 delay: -0.8
		});
	 
		t1.to(".menu", 2, {
			 top: "0%",
			 ease: Expo.easeInOut,
			 delay: -2
		});
	 
		t1.staggerFrom(".menu ul li", 2, {x: -200, opacity: 0, ease:Expo.easeOut}, 0.3);
	 
		t1.reverse();
		$(document).on("click", ".toggle-btn", function() {
			 t1.reversed(!t1.reversed());
		});
		$(document).on("click", "a", function() {
			 t1.reversed(!t1.reversed());
		});
	 
	 </script>

	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	

	<!-- gallery effects -->

	<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>


	<!-- script for gallery animation -->
	<script>
		baguetteBox.run('.grid-gallery', { animation: 'slideIn'});
	</script>

</body>
</html>

最佳答案

请更新如下脚本，这将阻止滚动:

   <script type="text/javascript">

    var t1 = new TimelineMax({paused: true});

    t1.to(".one", 0.8, {
         y: 6,
         rotation: 45,
         opacity:1,
         ease: Expo.easeInOut
    });
    t1.to(".two", 0.8, {
         y: -6,
         opacity: 1,
         rotation: -45,
         ease: Expo.easeInOut,
         delay: -0.8
    });

    t1.to(".menu", 2, {
         top: "0%",
         ease: Expo.easeInOut,
         delay: -2
    });

    t1.staggerFrom(".menu ul li", 2, {x: -200, opacity: 0, ease:Expo.easeOut}, 0.3);

    t1.reverse();
    $(document).on("click", ".toggle-btn", function() {
         t1.reversed(!t1.reversed());
    });
    /*$(document).on("click", "a", function() {
         t1.reversed(!t1.reversed());
    });*/

 </script>

<!-- gallery effects -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>


<!-- script for gallery animation -->
<script>
    baguetteBox.run('.grid-gallery', { animation: 'slideIn'});
$("#close-button").click(function() {
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });
</script>

关于javascript - 单击图库图像时导航栏会自动滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60679290/

上一篇：javascript - 循环遍历数组中的 json 响应

下一篇：javascript - 如何打印这条随机线？

相关文章：

javascript - 我应该如何向其他本地服务器发出请求？

javascript - 如何使用 `e.stopPropagation()` 组件调用 `onClick` 事件来处理 `react-select` 事件？

html - jqgrid fluid 最后一列适合

javascript - 在 AngularJS 中调用模态指令后 $scope 变量会重置

javascript - Angular 6 - 自定义模态窗口内的嵌套组件

javascript - jquery 图像验证不适用于数组

jquery - datepicker - 错误 daySettings 未定义

javascript - 使用 Fullcalendar 在 mysql 上插入一个日期与当前日期不同的事件

javascript - 如何使用 Jquery 中的切换类更改内部 html 内容？

html - Position:absolute 没有 top/left/bottom/right 值

©2024 IT工具网  联系我们