平滑滚动页面上的所有链接和按钮

本文介绍了平滑滚动页面上的所有链接和按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

前 26 行让我可以平滑滚动导航栏中的所有链接和徽标，但我不知道如何将它与我从另一个教程中获得的向上滚动按钮结合起来.有没有办法让所有链接在第一段代码中滚动，而不仅仅是导航栏中的元素?

The first 26 lines give me smooth scrolling for all links in my navbar and my logo, but I don't know how to combine it with the scroll up button that I've got from another tutorial. Is there a way to make all links scroll in the first piece of code and not only elements in the navbar?

$(document).ready(function(){
  // Add scrollspy to <body>
  $('body').scrollspy({target: ".navbar", offset: 50});

  // Add smooth scrolling on all links inside the navbar
  $("a").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    }  // End if
  });
});

jQuery(window).scroll(function(){
  if (jQuery(this).scrollTop() > 300) {
    jQuery('.scrollToTop').fadeIn();
  } else {
    jQuery('.scrollToTop').fadeOut();
  }
});

//Click event to scroll to top

jQuery('.scrollToTop').click(function(){
  jQuery('html, body').animate({scrollTop : 0},800);
  return false;
});

推荐答案

导航栏链接和scrollToTop链接的点击事件需要分开，并注册scrollToTop 链接也指向点击事件.因此，您的代码将如下所示(假设您在导航栏的链接中添加了一个nav-link"类):

You need to separate click event for navigation bar link and your scrollToTop link, and register scrollToTop link to a click event as well. So your code will look like this (assuming you add a class 'nav-link' to links at the navbar):

$(document).ready(function(){
  // Add scrollspy to <body>
  $('body').scrollspy({target: ".navbar", offset: 50});

  $('.scrollToTop').on('click',function(event){
      event.preventDefault();
    $('html, body').animate({scrollTop : 0}, 800);

  });

  // Add smooth scrolling on all links inside the navbar
  $(".nav-link").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    }  // End if
  });
});

jQuery(window).scroll(function(){
      if (jQuery(this).scrollTop() > 300) {
        jQuery('.scrollToTop').fadeIn();
      } else {
        jQuery('.scrollToTop').fadeOut();
      }
});

这篇关于平滑滚动页面上的所有链接和按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！