Question

我在Safari浏览器上使用香草Javascript进行平滑滚动时遇到问题。当用户单击为此目的提供的按钮时，我正在使用一个事件将网页滚动到顶部。

平滑滚动在Chrome和Firefox上工作正常，但是这种平滑效果在Safari上不起作用，并且网页滚动没有任何效果...

//Zenscroll JS Script

!function(t,e){"function"==typeof define&&define.amd?define([],e()):"object"==typeof module&&module.exports?module.exports=e():function n(){document&&document.body?t.zenscroll=e():setTimeout(n,9)}()}(this,function(){"use strict";var t=function(t){return t&&"getComputedStyle"in window&&"smooth"===window.getComputedStyle(t)["scroll-behavior"]};if("undefined"==typeof window||!("document"in window))return{};var e=function(e,n,o){n=n||999,o||0===o||(o=9);var i,r=function(t){i=t},u=function(){clearTimeout(i),r(0)},c=function(t){return Math.max(0,e.getTopOf(t)-o)},a=function(o,i,c){if(u(),0===i||i&&i<0||t(e.body))e.toY(o),c&&c();else{var a=e.getY(),f=Math.max(0,o)-a,s=(new Date).getTime();i=i||Math.min(Math.abs(f),n),function t(){r(setTimeout(function(){var n=Math.min(1,((new Date).getTime()-s)/i),o=Math.max(0,Math.floor(a+f*(n<.5?2*n*n:n*(4-2*n)-1)));e.toY(o),n<1&&e.getHeight()+o<e.body.scrollHeight?t():(setTimeout(u,99),c&&c())},9))}()}},f=function(t,e,n){a(c(t),e,n)},s=function(t,n,i){var r=t.getBoundingClientRect().height,u=e.getTopOf(t)+r,s=e.getHeight(),l=e.getY(),d=l+s;c(t)<l||r+o>s?f(t,n,i):u+o>d?a(u-s+o,n,i):i&&i()},l=function(t,n,o,i){a(Math.max(0,e.getTopOf(t)-e.getHeight()/2+(o||t.getBoundingClientRect().height/2)),n,i)};return{setup:function(t,e){return(0===t||t)&&(n=t),(0===e||e)&&(o=e),{defaultDuration:n,edgeOffset:o}},to:f,toY:a,intoView:s,center:l,stop:u,moving:function(){return!!i},getY:e.getY,getTopOf:e.getTopOf}},n=document.documentElement,o=function(){return window.scrollY||n.scrollTop},i=e({body:document.scrollingElement||document.body,toY:function(t){window.scrollTo(0,t)},getY:o,getHeight:function(){return window.innerHeight||n.clientHeight},getTopOf:function(t){return t.getBoundingClientRect().top+o()-n.offsetTop}});if(i.createScroller=function(t,o,i){return e({body:t,toY:function(e){t.scrollTop=e},getY:function(){return t.scrollTop},getHeight:function(){return Math.min(t.clientHeight,window.innerHeight||n.clientHeight)},getTopOf:function(t){return t.offsetTop}},o,i)},"addEventListener"in window&&!window.noZensmooth&&!t(document.body)){var r="history"in window&&"pushState"in history,u=r&&"scrollRestoration"in history;u&&(history.scrollRestoration="auto"),window.addEventListener("load",function(){u&&(setTimeout(function(){history.scrollRestoration="manual"},9),window.addEventListener("popstate",function(t){t.state&&"zenscrollY"in t.state&&i.toY(t.state.zenscrollY)},!1)),window.location.hash&&setTimeout(function(){var t=i.setup().edgeOffset;if(t){var e=document.getElementById(window.location.href.split("#")[1]);if(e){var n=Math.max(0,i.getTopOf(e)-t),o=i.getY()-n;0<=o&&o<9&&window.scrollTo(0,n)}}},9)},!1);var c=new RegExp("(^|\\s)noZensmooth(\\s|$)");window.addEventListener("click",function(t){for(var e=t.target;e&&"A"!==e.tagName;)e=e.parentNode;if(!(!e||1!==t.which||t.shiftKey||t.metaKey||t.ctrlKey||t.altKey)){if(u){var n=history.state&&"object"==typeof history.state?history.state:{};n.zenscrollY=i.getY();try{history.replaceState(n,"")}catch(t){}}var o=e.getAttribute("href")||"";if(0===o.indexOf("#")&&!c.test(e.className)){var a=0,f=document.getElementById(o.substring(1));if("#"!==o){if(!f)return;a=i.getTopOf(f)}t.preventDefault();var s=function(){window.location=o},l=i.setup().edgeOffset;l&&(a=Math.max(0,a-l),r&&(s=function(){history.pushState({},"",o)})),i.toY(a,null,s)}}},!1)}return i});


var arrowElt = document.getElementById("arrow-top");

window.addEventListener("scroll", function () {

	if (window.pageYOffset < 50) {
		arrowElt.classList.remove("active-arrow");

	} else {
		arrowElt.classList.add("active-arrow");
	}
	
	arrowElt.addEventListener("click", function () {
        // I tried that way at first

		//window.scroll ({
		//	top: 0,
		//	left: 0,
		//	behavior: 'smooth'
		//});

        // Then I tried this way in a second time
        zenscroll.toY(0)
	});
});

* {
	list-style: none;
}

body {
	margin: 0px;
	padding: 0px;
	background: url("../images/background.png") fixed;
	font-family: 'Raleway', 'sans-serif';
}


/* HEADER */

.header > div:nth-child(2) {
	margin: 0;
}

a,
a:hover,
a:visited {
	text-decoration: none;
}

header > .row {
	height: 80px;
}

.header {
	background-color: #000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	transition: 0.8s;
}

.row > h1,
nav > ul {
	margin: 0;
}

.row > h1 {
	color: #B3A2D5;
	font-size: 30px;
}

.row > h1 > a,
.row > h1 > a:visited {
	color: #B3A2D5;
}

.navb {
	padding: 0;
}

nav > ul {
	padding: 0;
}

nav > p {
	display: none;
	visibility: hidden;
}

nav > ul > li > a {
	display: block;
	font-weight: bold;
	color: #B3A2D5;
	font-size: 18px;
}

nav > ul > li > a:visited,
nav > ul > li > a:hover {
	color: #B3A2D5;
}

nav > ul > li:nth-child(2) {
	color: #fff;
	font-weight: bold;
	font-size: 18px;
}


/* SECTION */

section > h2 {
	font-size: 44px;
	text-align: center;
	color: #000;
}

section > p:nth-child(2) {
	font-size: 22px;
	text-align: center;
}

#tumblr-section {
	margin-top: 140px;
}

.jumbotron:last-child > .container-contenu-article > .contenu-article {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

#arrow-top {
	background: url("../images/arrow-top.png")center no-repeat;
	height: 45px;
	width: 45px;
	position: fixed;
	right: 35px;
	bottom: 30px;
	opacity: 0;
	cursor: pointer;
	transition: 0.6s;
	background-color: #333;
	border-radius: 5px;
	transform: translateX(100px);
	z-index: 100;
}

#arrow-top.active-arrow {
	opacity: 1;
	transition: 0.6s;
	transform: translateX(0);
}

@media screen and (max-width: 1220px) {
	section > h2 {
		font-size: 30px;
	}

	section > p:nth-child(2) {
		font-size: 16px;

	}
}

@media screen and (max-width: 1000px) {

	body {
		background: url("../images/background.png") no-repeat fixed;
	}

	nav > ul > li > a,
	nav > ul > li:nth-child(2) {
		font-size: 14px;
	}
}


@media screen and (max-width: 767px) {
	
	.header {
		height: 80px;
	}
	
	.linktitle {
		font-size: 22px;
	}
	
	.infosElts {
		font-size: 14px;
	}

	ul > li {
		visibility: hidden;
	}

   	.row > h1 {
		font-size: 20px;
	}

	nav > p {
		display: inline-block;
		color: #fff;
		text-align: center;
		font-size: 20px;
		text-transform: uppercase;
	}

	.toggle-btn {
		height: 30px;
		width: 30px;
		position: relative;
		float: left;
		top: 18px;
		left: 20px;
		cursor: pointer;
		z-index: 1000;
	}

	.toggle-btn span {
		height: 3px;
		background-color: #fff;
		width: 100%;
		position: absolute;
		top: 20px;
		right: 0;
		transition: .4s;
	}

	.toggle-btn span:before {
		content: '';
		height: 3px;
		background-color: #fff;
		width: 100%;
		position: absolute;
		top: -10px;
		right: 0;
		transition: .4s;
	}

	.toggle-btn span:after {
		content: '';
		height: 3px;
		background-color: #fff;
		width: 100%;
		position: absolute;
		top: 10px;
		right: 0;
		transition: 0.4s;
	}

	.menu {
		visibility: hidden;
		height: 0px;
		width: 230px;
		position: absolute;
		z-index: 0;
		top: 80px;
		left: 0;
		transition: 0.6s;
	}
}

@media screen and (max-width: 505px) {
	section > h2 {
		font-size: 24px;
	}

	section > p:nth-child(2) {
		font-size: 14px;
	}
}

@media screen and (max-width: 370px) {

	.toggle-btn {
		left: 0px;
	}
	
	#tumblr-section {
		margin-top: 110px;
	}

	footer img {
		width: 30px;
		height: 30px;
	}
}

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="UTF-8">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
	<link rel="stylesheet" href="../css/style-news.css">
	<link rel="stylesheet" href="../css/media-queries-news.css">
	<title>Home</title>
</head>

<body>
	<header class="container-fluid header">
		<div class="toggle-btn">
			<span></span>
		</div>

		<div class="row justify-content-between align-items-center">

			<h1 class="col-12 col-md-6 text-center text-md-left pl-0 pl-sm-3"><a href="index.html">TITLE</a></h1>

			<nav class="col-md-6 menu navb text-center">
				<p class="mt-3 menu-nav-mobile">Menu</p>
				<ul class="d-flex flex-column flex-md-row text-center justify-content-between">
					<li class="mt-4 mt-md-0 underline-over"><a href="index.html">HOME</a></li>
					<li class="mt-4 mt-md-0">NEWS</li>
					<li class="mt-4 mt-md-0 underline-over"><a href="">BIOGRAPHY</a></li>
					<li class="mt-4 mt-md-0 underline-over"><a href="">DISCOGRAPHY</a></li>
					<li class="mt-4 mt-md-0 underline-over"><a href="">CONTACT</a></li>
				</ul>
			</nav>
		</div>
	</header>


	<section id="tumblr-section" class="container">
	
		<h2 class="col-12">TUMBLR ARTICLES</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Mauris non metus ornare, auctor ipsum ac, pharetra enim.          Integer ut suscipit ex, at rutrum quam. Pellentesque              sodales purus ac massa dignissim, ultrices ultrices leo            feugiat. Donec et porttitor mi. Mauris condimentum purus a        mattis iaculis. Lorem ipsum dolor sit amet, consectetur            adipiscing elit. Donec ac dui purus. Donec tincidunt sed          nunc vitae volutpat. Maecenas fermentum orci metus, at            pellentesque orci dapibus non. Aenean est lectus, tincidunt        id enim at, consequat ornare sapien. Aenean accumsan augue        diam, et sagittis est interdum quis. Ut imperdiet quam ac          hendrerit rutrum. Maecenas sit amet porta sapien. Aliquam          erat volutpat. </p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Mauris non metus ornare, auctor ipsum ac, pharetra enim.          Integer ut suscipit ex, at rutrum quam. Pellentesque              sodales purus ac massa dignissim, ultrices ultrices leo            feugiat. Donec et porttitor mi. Mauris condimentum purus a        mattis iaculis. Lorem ipsum dolor sit amet, consectetur            adipiscing elit. Donec ac dui purus. Donec tincidunt sed          nunc vitae volutpat. Maecenas fermentum orci metus, at            pellentesque orci dapibus non. Aenean est lectus, tincidunt        id enim at, consequat ornare sapien. Aenean accumsan augue        diam, et sagittis est interdum quis. Ut imperdiet quam ac          hendrerit rutrum. Maecenas sit amet porta sapien. Aliquam          erat volutpat. </p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Mauris non metus ornare, auctor ipsum ac, pharetra enim.          Integer ut suscipit ex, at rutrum quam. Pellentesque              sodales purus ac massa dignissim, ultrices ultrices leo            feugiat. Donec et porttitor mi. Mauris condimentum purus a        mattis iaculis. Lorem ipsum dolor sit amet, consectetur            adipiscing elit. Donec ac dui purus. Donec tincidunt sed          nunc vitae volutpat. Maecenas fermentum orci metus, at            pellentesque orci dapibus non. Aenean est lectus, tincidunt        id enim at, consequat ornare sapien. Aenean accumsan augue        diam, et sagittis est interdum quis. Ut imperdiet quam ac          hendrerit rutrum. Maecenas sit amet porta sapien. Aliquam          erat volutpat. </p>
		
		<span id="arrow-top"></span>
		
	</section>
  </body>
  
 </html>

我知道Safari不支持window.scroll（{top：0，left：0，“ behavior”：“ smooth”}），但我也尝试了Zenscroll Javascript模块（https://github.com/zengabor/zenscroll），它是应该可以在Safari上运行，但是我仍然遇到相同的问题...

谢谢您的建议。

Answer 1

ZenScroll 在 Safari 上对我有用，我运行的是 2021 年的最新版本（MacBook Air M1 芯片，Big Sur）。你在html body底部添加了以下脚本吗？

  <script src="./assets/javascript/zenscroll-min.js"></script>
</body>

Zenscroll在Safari中无法流畅滚动

1 个答案: