相关疑难解决方法(0)

我正在寻找一种方法来包含幻灯片效果,当您单击页面上或下的本地锚点链接时.

我想要一个你有这样一个链接的东西:

<a href="#nameofdivetc">link text, img etc.</a>

也许添加了一个类,所以你知道你希望这个链接是一个滑动链接:

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

然后,如果单击此链接,页面将向上或向下滑动到所需位置(可以是div,标题,页面顶部等).

这就是我以前的情况:

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor …

我需要在css中使用属性选择器来更改不同颜色和图像的链接,但它不起作用.

我有这个HTML:

<a href="/manual.pdf">A PDF File</a>

这个css:

a {
     display: block;
     height: 25px;
     padding-left: 25px;
     color:#333;
     font: bold 15px Tahoma;
     text-decoration: none;
 }
 a[href='.pdf'] { background: red; }

为什么背景不是红色？

我可以使用以下内容滚动到200px

btn.addEventListener("click", function(){
    window.scrollTo(0,200);
})

但我想要一个流畅的滚动效果.我该怎么做呢？

如何使用react-router,并将链接导航到特定页面上的特定位置？(例如/home-page#section-three)

细节:

我正在使用react-router我的React应用程序.

我有一个站点范围的导航栏,需要链接到页面的特定部分,如/home-page#section-three.

因此,即使您在说/blog,单击此链接仍将加载主页,第三部分滚动到视图中.这正是标准的<a href="/home-page#section-three>运作方式.

注意:react-router的创建者没有给出明确的答案.他们说它正在进行中,并且同时使用其他人的答案.我会尽力保持这个问题的最新进展和可能的解决方案,直到出现主导的问题.

研究:

如何使用反应路由器的普通锚链接

这个问题是从2015年(所以10年前的反应时间).最受欢迎的答案是用来HistoryLocation代替HashLocation.基本上这意味着将位置存储在窗口历史记录中,而不是存储在哈希片段中.

坏消息是......即使使用HistoryLocation(大多数教程和文档在2016年所说的内容),锚标签仍然不起作用.

https://github.com/ReactTraining/react-router/issues/394

ReactTraining上的一个线程,关于如何使用anchor链接与react-router.这是没有确认的答案.要小心,因为大多数建议的答案都已过时(例如使用"哈希"道具<Link>)

我试图使用这个jQuery选择器:

$("a:has(href*=#)").click(function() {
     alert('works');
});  

但它似乎没有用.我想选择所有在href属性中都有锚点的标签(在那里有#符号)

我想平滑地滚动到一个元素而不使用jQuery - 只是纯粹的javascript.我希望通用功能能够向下滚动并平滑地向上滚动到文档中的特定位置.

我知道我可以在jQuery中使用以下内容:

$('html, body').animate({
     scrollTop: $('#myelementid').offset().top
}, 500);

我怎么用javascript做到这一点？

这就是我想要做的:

function scrollToHalf(){
  //what do I do?
}
function scrollToSection(){
 //What should I do here?
}

<input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page">
    <br>
    <input type="button" onClick="scrollToSection()" value="Scroll To Section1">
    <section style="margin-top: 1000px;" id="section1">
      This is a section
</section>

在jquery我会这样做:

html, body{
  height: 3000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page">
<br>
<input type="button" onClick="scrollToSection()" value="Scroll To Section1">
<section style="margin-top: 1000px;" id="section1">
  This is …

我正在尝试链接到我的页面的HTML中的元素,但它不起作用,我不确定为什么.

这是最初的链接:

<ul>
        <a href="#"><li>About Me</li></a>
        <a href="#"><li>Past</li></a>
        <a href="#Work"><li>Work</li></a>
        <a href="http://blog.tommaxwell.me"><li>Blog</li></a>
    </ul>

我希望此列表中的所有li都链接到页面上的其他位置(除了最后一个).

在这段代码的顶部是我要链接到的地方:

<div id="Work">
    <a name="Work"><h2 id="work-title">Work</h2></a>
        <ul>
            <li>
                <h3>BrainDB</h3>
                <p>BrainDB is a new startup I'm working on with my co-founder, <a href="http://www.twitter.com/masonlong" id="mason">@masonlong</a>. I write everything from Rails to AngularJS and CSS. BrainDB's goal is to augment the mind with useful and inviting services.</p>
            </li>

            <li>
                <h3 id>SummarizeIt</h3>
                <p><a href="http://54.225.211.118/" id="summarize">SummarizeIt</a> is a JavaScript project that I built during a weekend. It utilizes an API for …

我已经尝试了许多不同的代码来平滑滚动到锚点.我找不到一个有效的.它需要能够垂直,水平和对角滚动.我与其他人发现的另一个问题是它们似乎不适用于多个目标.我希望它能够滚动到页面上的任何锚点,而无需编辑脚本.

小提琴

这是最匹配的代码,我无法使其工作:

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
        scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});

它在JSFiddle中工作,但是当我把它放在我的页面上时它不起作用.

为什么这不重复？ 这是一个多方向脚本,不针对单个元素.它适用于页面上的所有链接.

我不想拥有我的网站，这样当您单击图像时，它会自动将您滚动回页面顶部。我尝试了一些我在网上看到的版本，但它们对我不起作用。如果你们能试一试，我将不胜感激。如果您有任何问题，请告诉我。谢谢

var click = 0;

function checkClicks(imgs) {

  if (click == 0) {
    // Run your animation on first click
    document.getElementById('column1').classList.add('animate1')
    document.getElementById('column2').classList.add('animate2')
    document.getElementById('column3').classList.add('animate3')
    document.getElementById('column4').classList.add('animate4')
    document.getElementById('column5').classList.add('animate5')
    document.getElementById('column6').classList.add('animate6')
    document.getElementById('column7').classList.add('animate7')
    document.getElementById('column8').classList.add('animate8')
    document.getElementById('column9').classList.add('animate9')
    document.getElementById('footer').classList.add('animate10')
    document.getElementById('clickimage').classList.add('none')
    document.getElementById('abtproj').classList.add('animate11');
    // hold Images for 1s
    setTimeout(function() {
      myFunction(imgs);
    }, 2050);
  } else {
    myFunction(imgs);
  }

  click = 1;
}

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  expandImg.src = imgs.src;
  var imgParagraph = document.getElementById('img-paragraph');
  imgParagraph.innerHTML = imgs.getAttribute("head");

  expandImg.parentElement.style.display = "table-cell";
  imgParagraph.style.display = 'table-cell';
}
let target = document.querySelector('.column img'); …

虽然有人问了几次,但我找不到能解决问题的方法.

这是我的平滑滚动代码:

$(function() {
  $('a[href*=#]:not([href=#]),a[href*=#]:not(a[data-toggle])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
}); 

这是css-tricks代码,有点编辑.这是网站:http://redrocketwebsitedesign.co.uk/test/my3DtwinAlpha/about/#arrow6

所以手风琴仍然被选中用于滚动,并且它没有运行手风琴js.我认为我的javascript没有选择器代码存在问题: a[href*=#]:not(a[data-toggle])

任何帮助表示赞赏: - ]

在 BrowserStack 中进行测试后，我得出的结论是，自版本 81 以来，使用scrollTo()选项参数behavior: smooth在 Chrome 和 Edge 中不起作用。Edge 和 Chrome 的版本 80 都按预期工作。根据MDN 的说法，它应该可以在没有星号的情况下工作。（与 Safari 不同）

在诸如此之类的流行答案中，behavior: smooth推荐使用“使用”来在 Web 应用程序中启用平滑滚动。

这是一个小的可复制的：

<html>
<button onclick="goToAnchor('b')">Scroll to B</button>
<div id="a" style="height: 1000px; background-color: blue;">Blue</div>
<div id="b" style="height: 1000px; background-color: red;">Red</div>
<div id="c" style="height: 1000px; background-color: green;">Green</div>

</html>

<script>
  function goToAnchor(anchor) {
    let rect = document.getElementById(anchor).getBoundingClientRect();
    window.scrollTo({
      left: rect.left + window.pageXOffset,
      top: rect.top + window.pageYOffset,
      behavior: 'smooth',
    });
  }
</script>

预期的行为是浏览器窗口将视图平滑地插入红色 div。在我测试过的所有版本的 …

假设我在页面中有一个链接，

<a href="https://example.com/#sample"><p>Click Me</a>

单击单击可转到href属性中的链接。但是由于众神的工作方式，它会立即捕捉到该页面中的id。

我要发生的是该页面不应立即转到ID，而应从页面顶部开始，然后平滑滚动至ID。

顺便提一句，粘性菜单妨碍了它，当它捕捉到ID时，就会与菜单重叠（这是我希望它滚动的主要原因之一）。

jQuery不是我的强项。

谢谢任何可以帮助的人。

编辑 我认为我的措词不正确。带有a标签的链接位于与其目标不同的页面上。例如：

主页上有链接

<a href="https://example.com/anotherPage/#sample"><p>Click Me</a>

我想滚动一个页面来工作。

抱歉，此操作不够详细。

感谢任何答复。