我想导航到新页面上的锚点,但我希望页面在顶部加载,然后立即平滑滚动到相关的锚点.可以这样做吗？
我是一个完整的Javascript新手.
这是我目前用于在当前页面内平滑滚动的js.我只是在链接上应用了一类"滚动".
非常感谢!
<script>
$(function(){
$('.scroll').on('click',function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top + 'px' }, 1000, 'swing');
});
});
</script>
我正在使用剪切路径来更改基于背景色的徽标颜色。
除此之外，徽标还根据用户在页面上的垂直位置从上到下滚动。页面顶部=顶部徽标，页面底部=底部徽标等。
不幸的是，当我添加剪切路径时，徽标失去了滚动位置，并且在第一个徽标之后根本不起作用。
有没有解决的办法？同样，徽标位置从一开始就有点偏离，因此，如果有任何一种方法可以同时解决这个问题。
您可以在此处看到原始问题： 基于滚动位置的div位置
我已经尝试过了，但是似乎无法正常工作。
我使用的是“高级自定义字段”，每个部分的PHP文件在标头中都有此标记，作为剪切路径的一部分，相应地使用了白色或深色徽标。它的父母位置相对，孩子绝对。
div class="logo-scroll">
<div class="scroll-text">
<a href="/home"><img width="53px" height="260px" src="/wp-content/uploads/2019/07/sheree-walker-web-design-edinburgh-vertical-01.svg"/></a>
</div>
</div>
Javascript
const docHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
const logo = document.querySelector('.scroll-text');
const logoHeight = logo.offsetHeight;
// to get the pseudoelement's '#page::before' top we use getComputedStyle method
const barTopMargin = parseInt(getComputedStyle(document.querySelector('#page'), '::before').top);
let viewportHeight, barHeight, maxScrollDist, currentScrollPos, scrollFraction;
logo.style.top = barTopMargin + 'px';
window.addEventListener('load', update);
window.addEventListener('resize', setSizes);
document.addEventListener('scroll', update);
setSizes();
function update() {
currentScrollPos = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
scrollFraction = currentScrollPos / (docHeight …我有一个包含多个元素的固定菜单。我正在尝试找到一种方法，使所有这些元素根据背景颜色更改颜色。
元素是
#page::before,
.logo-scroll
这两个元素都有白色边框（无填充）
主导航.main-navigation及其边框的链接为白色
白色的标识。我也有黑色版本。
我的网站由3种颜色组成，黑色，白色和黄色。
当背景部分为黄色或白色时，我希望将这些项目切换为黑色。
该网站正在进行中，但您可以在这里查看：https : //www.sheree-new.shereewalker.com
我已经尝试过使用徽标
https://eduardoboucas.com/blog/2017/09/25/svg-clip-path-logo-colour.html
但无法使其正常工作。我为元素尝试了混合混合模式，但在黄色时使线条变为蓝色。我试图做混合混合模式，然后使用去饱和或灰度滤镜，但是没有运气。
一个问题可能无法解决，但我想也许有一个插件可以在Wordpress中处理此问题？
基本上我需要的是所有元素的 https://codepen.io/whatthephuc/pen/QQagBj
标头包含左右nav元素：
<div class="logo-scroll">
<div class="scroll-text">
<a href="/home"><img width="53px" height="260px" src="/wp-content/uploads/2019/07/sheree-walker-web-design-edinburgh-vertical-01.svg"/></a>
</div>
</div>
<header id="masthead" class="site-header">
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'sheree_walker' ); ?></button>
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
CSS
header#masthead {
height: calc(100vh - 60px);
width: 75px;
position: fixed;
float: right;
right: 30px; …我为邮件黑猩猩选择了“全宽”模板，我一生都无法更改每一行的背景颜色。
它允许标题的全宽颜色条带，但不允许后面的块。我可以在其中放置内联样式或嵌入式 css，但我不知道如何定位每一行。
我已收到具有此功能的电子邮件，但我无法实现此目的。任何帮助都会很棒。
我的网站上有一个功能，徽标根据用户在网站上的位置垂直滚动。
但它不适用于 Safari（包括手机和平板电脑）。
控制台中的滚动位置似乎根本没有改变。
// logo positioning
let logos, logoHeight, barTopMargin;
let viewportHeight;
window.addEventListener('load', init);
window.addEventListener('resize', setSizes);
document.addEventListener('scroll', update);
function init(lockUpdate) {
logos = document.querySelectorAll('.scroll-text');
setSizes(lockUpdate);
}
function update() {
// ensure initialization and prevent recursive call
if (!logos) init(true);
//*************************************************
/**************************************************
THIS LINE MUST BE HERE.
**************************************************/
let maxScrollDist = document.documentElement.scrollHeight - viewportHeight;
//*************************************************
let currentScrollPos = document.documentElement.scrollTop;
let newTop;
let middle = currentScrollPos + viewportHeight/2;
let middleY = maxScrollDist/2;
if (middle >= (maxScrollDist+viewportHeight)/2) { …